perf: add function scss

6 files changed, 105 insertions, 0 deletions

diff --git a/src/scss/_function.scss b/src/scss/_function.scss
new file mode 100644
index 0000000..d1bb570
--- /dev/null
+++ b/src/scss/_function.scss
@@ -0,0 +1,4 @@
+@import 'function/calc-font-size';
+@import 'function/calc-stack';
+@import 'function/strip-unit';
+@import 'function/contrast-color';
diff --git a/src/scss/function/_calc-font-size.scss b/src/scss/function/_calc-font-size.scss
new file mode 100644
index 0000000..963c762
--- /dev/null
+++ b/src/scss/function/_calc-font-size.scss
@@ -0,0 +1,43 @@
+@charset "utf-8";
+// ===================================================================
+// px to em
+// ===================================================================
+
+@function px2em($px, $base: 16) {
+	@return strip-unit($px) / strip-unit($base) * 1em;
+}
+
+@function px2rem($px, $base: 16) {
+	@return strip-unit($px) / strip-unit($base) * 1rem;
+}
+// ===================================================================
+// percent to px
+// ===================================================================
+
+@function percent2px($percent, $base: 16) {
+  @return strip-unit($base) * (strip-unit($percent) / 100) * 1px;
+}
+
+// ===================================================================
+// percent to em
+// ===================================================================
+
+@function percent2em($percent, $base: 16) {
+  @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1em;
+}
+
+@function percent2rem($percent, $base: 16) {
+  @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1rem;
+}
+
+// ===================================================================
+// em to px
+// ===================================================================
+
+@function em2px($em, $base: 16) {
+  @return strip-unit($em) * strip-unit($base) * 1px;
+}
+
+@function rem2px($rem, $base: 16) {
+  @return strip-unit($rem) * strip-unit($base) * 1px;
+}
diff --git a/src/scss/function/_calc-stack.scss b/src/scss/function/_calc-stack.scss
new file mode 100644
index 0000000..3647d85
--- /dev/null
+++ b/src/scss/function/_calc-stack.scss
@@ -0,0 +1,21 @@
+@charset "utf-8";
+
+@function stack($line-height: 1, $font-size: 16px, $base: 16px) {
+	$line-height: strip-unit($line-height) * strip-unit($base);
+	@return $line-height / strip-unit($font-size) * 1rem;
+}
+
+@function line-height($line-space: 4px, $font-size: 16px, $base: 16px) {
+	@if unit($font-size) == '%' {
+		$font-size: percent2px($font-size, $base);
+	} @else if unit($font-size) == 'em' {
+		$font-size: em2px($font-size, $base);
+	} @else if unit($font-size,) == 'rem' {
+		$font-size: rem2px($font-size, $base);
+	}
+
+	$font-size: strip-unit($font-size);
+	$line-space: strip-unit($line-space);
+
+	@return (($line-space * 2) + $font-size) / $font-size;
+}
diff --git a/src/scss/function/_contrast-color.scss b/src/scss/function/_contrast-color.scss
new file mode 100644
index 0000000..75f341c
--- /dev/null
+++ b/src/scss/function/_contrast-color.scss
@@ -0,0 +1,22 @@
+// ===================================================================
+// contrast color
+// ===================================================================
+
+@charset "utf-8";
+
+@function contrast-color($color: null, $dark: #000, $light: #fff) {
+	@if $color == null {
+		@return null;
+	}
+	@else {
+		$color-brightness: brightness($color);
+		$light-color-brightness: brightness($light);
+		$dark-color-brightness: brightness($dark);
+
+		@return if(abs($color-brightness - $light-color-brightness) > abs($color-brightness - $dark-color-brightness), $light, $dark);
+	}
+}
+
+@function brightness($color: null) {
+	@return ((red($color) * 299) + (green($color) * 587) + (blue($color) * 114)) / 1000;
+}
diff --git a/src/scss/function/_strip-unit.scss b/src/scss/function/_strip-unit.scss
new file mode 100644
index 0000000..b38fdfe
--- /dev/null
+++ b/src/scss/function/_strip-unit.scss
@@ -0,0 +1,13 @@
+@charset "utf-8";
+
+@function strip-unit($value) {
+	@if type-of($value) == 'number' and unitless($value) == false {
+		@return $value / ($value * 0 + 1);
+	} @else if type-of($value) == 'number' {
+		@return $value;
+	} @else {
+		@warn $value;
+		@warn type-of($value);
+		@error "error strip unit"
+	}
+}
diff --git a/src/scss/theme.scss b/src/scss/theme.scss
index e36cffc..e43d9b4 100644
--- a/src/scss/theme.scss
+++ b/src/scss/theme.scss
@@ -1,4 +1,6 @@
 @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
+@import 'function';
+
 @import 'variable';
 
 @import "foundation";