perf: replace scss from node-sass to dart-sass

15 files changed, 192 insertions, 134 deletions

diff --git a/src/scss/_component.scss b/src/scss/_component.scss
index 59c9013..d6eb4bc 100644
--- a/src/scss/_component.scss
+++ b/src/scss/_component.scss
@@ -1,5 +1,15 @@
+// Built-In Modules
+@use 'sass:map';
+
+// Custom Modules
+@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
+
+// Included Modules
+@use 'variable';
+@use 'foundation/stack';
+
 main * {
-	@extend .first-stack;
+	@extend %first-stack;
 }
 
 main {
@@ -14,18 +24,18 @@ main {
 		+ blockquote,
 		+ pre,
 		+ figure {
-			@extend .stack;
+			@extend %stack;
 		}
 	}
 
 	li > ul,
 	li > ol {
-		@extend .unset-stack;
+		@extend %unset-stack;
 	}
 }
 
 figure > figcaption {
-	@extend .none-stack;
+	@extend %none-stack;
 }
 
 .table_of_contents,
@@ -38,14 +48,14 @@ figure > figcaption {
 .button,
 .gist,
 .twitter-tweet {
-	@extend .stack;
+	@extend %stack;
 }
 
 .pagination {
-	@include grid($flex-wrap: nowrap, $justify-content: space-between);
+	@include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between);
 	font-weight: bold;
 	> * {
-		@extend .none-stack;
+		@extend %none-stack;
 	}
 }
 .nav-prev {}
@@ -53,9 +63,9 @@ figure > figcaption {
 	margin-left: auto;
 }
 
-@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) {
+@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
 	.pagination {
-		@include grid($flex-flow: column nowrap, $justify-content: null, $align-items: center);
+		@include flexbox-grid-mixins.grid($flex-flow: column nowrap, $justify-content: null, $align-items: center);
 	}
 	.nav-next {
 		margin-left: 0;
@@ -67,7 +77,7 @@ figure > figcaption {
 	--panel-background-color: unset;
 	--panel-border-color: transparent;
 
-	padding: $default-layout-padding;
+	padding: variable.$default-layout-padding;
 	color: var(--panel-font-color, #000);
 	background: var(--panel-background-color, unset);
 	border: 1px solid;
@@ -80,7 +90,7 @@ figure > figcaption {
 }
 
 .panel-primary {
-	--panel-border-color: #{$default-border-color};
+	--panel-border-color: #{variable.$default-border-color};
 }
 .panel-notice {
 	--panel-font-color: #fff;
@@ -127,9 +137,9 @@ figure > figcaption {
 
 	--button-font-color: #000;
 	--button-font-hover-color: #000;
-	--button-background-color: #{$default-background-color};
+	--button-background-color: #{variable.$default-background-color};
 	--button-background-hover-color: #f7f7f7;
-	--button-border-color: #{$default-border-color};
+	--button-border-color: #{variable.$default-border-color};
 
 	color: var(--button-font-color, #000);
 	background: var(--button-background-color, unset);
@@ -137,7 +147,7 @@ figure > figcaption {
 	border-color: var(--button-border-color, transparent);
 
 	&:hover {
-		color:var(--button-font-hover-color, #000);
+		color: var(--button-font-hover-color, #000);
 		text-decoration: none;
 		background: var(--button-background-hover-color, unset);
 	}
@@ -160,7 +170,7 @@ figure > figcaption {
 .button-caution {
 	--button-font-color: #fff;
 	--button-font-hover-color: #fff;
-	--button-background-color:  #f56558;
+	--button-background-color: #f56558;
 	--button-background-hover-color: #d45145;
 	--button-border-color: transparent;
 }
@@ -174,15 +184,15 @@ figure > figcaption {
 .button-danger {
 	--button-font-color: #fff;
 	--button-font-hover-color: #fff;
-	--button-background-color:  #ce3426;
+	--button-background-color: #ce3426;
 	--button-background-hover-color: #a0281d;
 	--button-border-color: transparent;
 }
 
 .notification {
-	padding: .2rem $default-layout-padding;
+	padding: .2rem variable.$default-layout-padding;
 	text-align: center;
-	background: $sidebar-active-color;
+	background: variable.$sidebar-active-color;
 }
 
 .backtothetop {
@@ -200,15 +210,15 @@ figure > figcaption h4 {
 
 .table_of_contents {
 	font-size: 90%;
-	padding: $default-layout-padding;
-	border: 4px solid $default-border-color;
+	padding: variable.$default-layout-padding;
+	border: 4px solid variable.$default-border-color;
 
 	ul {
 		list-style: none;
 		padding-left: 0;
 	}
 	li {
-		border-top: 1px solid $default-border-color;
+		border-top: 1px solid variable.$default-border-color;
 	}
 	> nav > ul > li:first-child {
 		border-top: unset;
@@ -251,14 +261,14 @@ figure > figcaption h4 {
 	color: #70757a;
 }
 .ais-Hits-item {
-	@extend .stack;
+	@extend %stack;
 
 	h3 {
 		font-size: 140%;
 		font-weight: normal;
 	}
 	p {
-		@extend .unset-stack;
+		@extend %unset-stack;
 		color: #3C4043;
 	}
 	.lastmod {
@@ -271,19 +281,20 @@ figure > figcaption h4 {
 	margin-top: 1em;
 }
 .ais-Pagination-list {
-	@extend ul.no-style;
-	@include grid($flex-wrap: wrap, $justify-content: center);
+	list-style: none;
+	padding-left: 0;
+	@include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center);
 }
 .ais-Pagination-item {
 	padding: .6rem;
 }
 
 .code {
-	@include grid($flex-wrap: wrap);
-	@extend .stack;
+	@include flexbox-grid-mixins.grid($flex-wrap: wrap);
+	@extend %stack;
 
 	.filename {
-		@include grid-col($col: 9, $flex-shrink: 0, $max-width: 75%);
+		@include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%);
 		font-size: 80%;
 		color: #666;
 	}
@@ -302,10 +313,10 @@ figure > figcaption h4 {
 		outline: none;
 	}
 	.code-content {
-		@include grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
+		@include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
 
 		.highlight {
-			@extend .none-stack;
+			@extend %none-stack;
 		}
 	}
 }
diff --git a/src/scss/_foundation.scss b/src/scss/_foundation.scss
deleted file mode 100644
index fc99f81..0000000
--- a/src/scss/_foundation.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "foundation/normalize";
-@import "foundation/reset";
-@import "foundation/element";
-@import "foundation/stack";
diff --git a/src/scss/_function.scss b/src/scss/_function.scss
deleted file mode 100644
index d1bb570..0000000
--- a/src/scss/_function.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'function/calc-font-size';
-@import 'function/calc-stack';
-@import 'function/strip-unit';
-@import 'function/contrast-color';
diff --git a/src/scss/_project.scss b/src/scss/_project.scss
index 52186c7..2c5c444 100644
--- a/src/scss/_project.scss
+++ b/src/scss/_project.scss
@@ -1,7 +1,16 @@
+// Built-In Modules
+@use 'sass:map';
+
+// Custom Modules
+@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
+
+// Included Modules
+@use 'variable';
+
 header {
 	color: var(--custom-font-color, #fff);
 	background: var(--custom-background-color, #000);
-	padding: .5rem $default-layout-padding;
+	padding: .5rem variable.$default-layout-padding;
 
 	h1 {
 		font-size: 140%;
@@ -26,7 +35,7 @@ header {
 .global-menu {
 	color: var(--custom-font-color, #fff);
 	background: var(--custom-background-color, #000);
-	padding: .2rem $default-layout-padding;
+	padding: .2rem variable.$default-layout-padding;
 
 	ul {
 		list-style: none;
@@ -48,7 +57,7 @@ header {
 		z-index: 99999;
 
 		li {
-			padding: .2rem $default-layout-padding;
+			padding: .2rem variable.$default-layout-padding;
 			background: var(--custom-background-color, #000);
 			width: 140px;
 			font-size: 80%;
@@ -63,10 +72,10 @@ header {
 		font-size: 80%;
 	}
 	li.parent:hover > ul.sub-menu {
-		@include grid($flex-flow: column nowrap);
+		@include flexbox-grid-mixins.grid($flex-flow: column nowrap);
 	}
 
-	@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) {
+	@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
 		li {
 			display: block;
 			margin-right: 0;
@@ -113,7 +122,7 @@ main {
 	padding: 3rem;
 }
 
-@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) {
+@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
 	main {
 		padding: 1rem;
 	}
@@ -122,8 +131,8 @@ main {
 .sidebar {
 	font-size: 90%;
 	line-height: 1.8;
-	background: $sidebar-background-color;
-	border-right: 1px solid $sidebar-active-color;
+	background: variable.$sidebar-background-color;
+	border-right: 1px solid variable.$sidebar-active-color;
 
 	ul {
 		list-style: none;
@@ -137,12 +146,12 @@ main {
 		color: #404040;
 		text-decoration: none;
 		padding: .2rem 1rem;
-		border-left: solid 4px $sidebar-background-color;
-		border-bottom: solid 1px $sidebar-active-color;
+		border-left: solid 4px variable.$sidebar-background-color;
+		border-bottom: solid 1px variable.$sidebar-active-color;
 
 		&:hover {
 			color: #404040;
-			background: $sidebar-hover-color;
+			background: variable.$sidebar-hover-color;
 			border-left: solid 4px #ccc;
 		}
 	}
@@ -163,14 +172,14 @@ main {
 		padding-left: 1rem + 1rem * 5;
 	}
 
-	@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) {
+	@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
 		nav > ul > li:first-child a {
-			border-top: solid 1px $sidebar-active-color;
+			border-top: solid 1px variable.$sidebar-active-color;
 		}
 	}
 
 	.active > a {
-		background: $sidebar-active-color;
+		background: variable.$sidebar-active-color;
 		border-left: solid 4px #ccc;
 	}
 
@@ -196,7 +205,7 @@ main {
 }
 
 .sidebar-footer {
-	padding: $default-layout-padding;
+	padding: variable.$default-layout-padding;
 }
 
 footer {
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index a2f4c84..e58fab2 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -1,3 +1,12 @@
+// Built-In Modules
+@use 'sass:map';
+
+// Custom Modules
+@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
+
+// Included Modules
+@use 'variable';
+
 /*-----------------------*
 		Structure
 *-----------------------*/
@@ -9,40 +18,40 @@ body {
 .container {
 	width: 100%;
 	height: 100%;
-	@include grid($flex-flow: column nowrap);
+	@include flexbox-grid-mixins.grid($flex-flow: column nowrap);
 	margin: auto;
 }
 
 .content-container {
-	@include grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto);
-	@include grid($justify-content: center);
+	@include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto);
+	@include flexbox-grid-mixins.grid($justify-content: center);
 }
 
 main {
-	@include grid-col($col: 9, $flex-shrink: 0, $max-width: 75%);
+	@include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%);
 
 	&:only-child {
-		@include grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
+		@include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
 	}
 }
 
 .sidebar {
-	@include grid-col($col: 3, $order: -1);
+	@include flexbox-grid-mixins.grid-col($col: 3, $order: -1);
 	// position: fixed;
 	// overflow-x: hidden;
 	overflow-x: hidden;
 	overflow-y: scroll;
 }
 
-@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) {
+@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
 	.content-container {
-		@include grid($flex-flow: column nowrap);
+		@include flexbox-grid-mixins.grid($flex-flow: column nowrap);
 	}
 
 	main {
-		@include grid-col($col: none, $flex-shrink: 0, $min-width: 100%);
+		@include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%);
 	}
 	.sidebar {
-		@include grid-col($col: none, $order: 1);
+		@include flexbox-grid-mixins.grid-col($col: none, $order: 1);
 	}
 }
diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss
index 0e2f5a6..6c9b578 100644
--- a/src/scss/_variable.scss
+++ b/src/scss/_variable.scss
@@ -1,9 +1,11 @@
+@use 'function/calc-stack';
+
 $default-layout-width: 1024px !default;
 
 $default-font-size: 100% !default;
 $default-line-space: 8px !default;
-$default-line-height: line-height($default-line-space, $default-font-size) !default;
-$default-stack: stack($default-line-height, $default-font-size) * 4 !default;
+$default-line-height: calc-stack.line-height($default-line-space, $default-font-size) !default;
+$default-stack: calc-stack.stack($default-line-height, $default-font-size) * 4 !default;
 
 $default-layout-margin: 0 !default;
 $default-layout-padding: $default-stack !default;
diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss
index 4b5b54c..3444edf 100644
--- a/src/scss/foundation/_element.scss
+++ b/src/scss/foundation/_element.scss
@@ -1,3 +1,6 @@
+@use '../variable';
+@use '../function/calc-stack';
+
 /*-----------------------*
 		Element v1.0.0-custom
 *-----------------------*/
@@ -6,16 +9,16 @@
 }
 
 :root {
-	font-size: $default-font-size;
-	line-height: line-height($default-line-space, $default-font-size);
-	color: $default-font-color;
-	font-family: var(--custom-font-family-base, $default-font-family);
+	font-size: variable.$default-font-size;
+	line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size);
+	color: variable.$default-font-color;
+	font-family: var(--custom-font-family-base, variable.$default-font-family);
 	font-feature-settings : 'pwid';
 }
 
 body {
-	background-color: $default-background-color;
-	margin: $default-layout-margin;
+	background-color: variable.$default-background-color;
+	margin: variable.$default-layout-margin;
 }
 
 h1,
@@ -24,9 +27,9 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: var(--custom-font-family-headings, $default-font-family);
+	font-family: var(--custom-font-family-headings, variable.$default-font-family);
 	font-weight: bold;
-	line-height: $default-line-height;
+	line-height: variable.$default-line-height;
 
 	> small {
 		font-size: 75%;
@@ -36,37 +39,37 @@ h6 {
 
 h1 {
 	font-size: 240%;
-	line-height: line-height($default-line-space, 240%);
+	line-height: calc-stack.line-height(variable.$default-line-space, 240%);
 }
 h2 {
 	font-size: 200%;
-	line-height: line-height($default-line-space, 200%);
+	line-height: calc-stack.line-height(variable.$default-line-space, 200%);
 }
 h3 {
 	font-size: 160%;
-	line-height: line-height($default-line-space, 160%);
+	line-height: calc-stack.line-height(variable.$default-line-space, 160%);
 }
 h4 {
 	font-size: 140%;
-	line-height: line-height($default-line-space, 140%);
+	line-height: calc-stack.line-height(variable.$default-line-space, 140%);
 }
 h5 {
 	font-size: 120%;
-	line-height: line-height($default-line-space, 120%);
+	line-height: calc-stack.line-height(variable.$default-line-space, 120%);
 }
 h6 {
 	font-size: 100%;
-	line-height: line-height($default-line-space, 100%);
+	line-height: calc-stack.line-height(variable.$default-line-space, 100%);
 }
 
 a {
-	color: var(--custom-link-text-color, $default-link-text-color);
+	color: var(--custom-link-text-color, variable.$default-link-text-color);
 	text-decoration: none;
 
 	&:focus,
 	&:active,
 	&:hover {
-		color: var(--custom-link-text-hover-color, $default-link-text-hover-color);
+		color: var(--custom-link-text-hover-color, variable.$default-link-text-hover-color);
 		text-decoration: underline;
 	}
 }
@@ -78,7 +81,7 @@ hr {
 }
 
 p {
-	font-size: $default-font-size;
+	font-size: variable.$default-font-size;
 }
 
 img {
@@ -94,13 +97,13 @@ video {
 
 table {
 	border-collapse: collapse;
-	border: 1px solid $default-border-color;
+	border: 1px solid variable.$default-border-color;
 	width: 100%;
 }
 th,
 td {
-	border-top: 1px solid $default-border-color;
-	border-right: 1px solid $default-border-color;
+	border-top: 1px solid variable.$default-border-color;
+	border-right: 1px solid variable.$default-border-color;
 	tr:nth-child(even) & {
 		background: #f8f8f8;
 	}
@@ -140,9 +143,9 @@ dd {
 
 blockquote {
 	color: #999;
-	padding: $default-layout-padding;
+	padding: variable.$default-layout-padding;
 	background-color: #f4f4f4;
-	border-left: 4px solid $default-border-color;
+	border-left: 4px solid variable.$default-border-color;
 	border-radius: .2rem;
 }
 
@@ -167,7 +170,7 @@ kbd {
 
 pre {
 	background-color: #f4f4f4;
-	padding: $default-layout-padding;
+	padding: variable.$default-layout-padding;
 	overflow: auto;
 	white-space: pre-wrap;
 	border-radius: .2rem;
@@ -191,6 +194,6 @@ pre {
 
 figcaption {
 	color: #333;
-	font-size: $default-font-size;
-	line-height: line-height($default-line-space, $default-font-size);
+	font-size: variable.$default-font-size;
+	line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size);
 }
diff --git a/src/scss/foundation/_index.scss b/src/scss/foundation/_index.scss
new file mode 100644
index 0000000..edd558a
--- /dev/null
+++ b/src/scss/foundation/_index.scss
@@ -0,0 +1,4 @@
+@use "normalize";
+@use "reset";
+@use "element";
+@use "stack";
diff --git a/src/scss/foundation/_stack.scss b/src/scss/foundation/_stack.scss
index d7d3cb1..d9feb14 100644
--- a/src/scss/foundation/_stack.scss
+++ b/src/scss/foundation/_stack.scss
@@ -1,9 +1,11 @@
+@use '../variable';
+
 /*-----------------------*
 		stack
 *-----------------------*/
 :root {
-	--const-stack: #{$default-stack};
-	--stack-top: #{$default-stack};
+	--const-stack: #{variable.$default-stack};
+	--stack-top: #{variable.$default-stack};
 	--stack-bottom: 0;
 	--first-stack-top: 0;
 	--first-stack-bottom: 0;
@@ -11,45 +13,54 @@
 	--last-stack-bottom: 0;
 }
 
-.first-stack {
+.first-stack,
+%first-stack {
 	margin-top: var(--first-stack-top, unset);
 	margin-bottom: var(--first-stack-bottom, unset);
 }
 
-.stack {
+.stack,
+%stack {
 	margin-top: var(--stack-top, unset);
 	margin-bottom: var(--stack-bottom, unset);
 }
 
-.last-stack {
+.last-stack,
+%last-stack {
 	margin-top: var(--last-stack-top, unset);
 	margin-bottom: var(--last-stack-bottom, unset);
 }
 
-.stack-multi--by2 {
+.stack-multi--by2,
+%stack-multi--by2 {
 	margin-top: calc(var(--first-stack-top, unset) * 2);
 	margin-bottom: calc(var(--first-stack-bottom, unset) * 2);
 }
 
-.stack-multi--by4 {
+.stack-multi--by4,
+%stack-multi--by4 {
 	margin-top: calc(var(--first-stack-top, unset) * 4);
 	margin-bottom: calc(var(--first-stack-bottom, unset) * 4);
 }
 
-.stack-divi--by2 {
+.stack-divi--by2,
+%stack-divi--by2 {
 	margin-top: calc(var(--first-stack-top, unset) / 2);
 	margin-bottom: calc(var(--first-stack-bottom, unset) / 2);
 }
 
-.none-stack {
+.none-stack,
+%none-stack {
 	margin-top: 0;
 }
 
-.unset-stack {
+.unset-stack,
+%unset-stack {
 	margin-top: unset;
 }
 
-.reverse-stack {
+.reverse-stack
+%reverse-stack {
 	margin-top: var(--stack-bottom, unset);
 	margin-bottom: var(--stack-top, unset);
 }
diff --git a/src/scss/function/_calc-font-size.scss b/src/scss/function/_calc-font-size.scss
index 963c762..1e54885 100644
--- a/src/scss/function/_calc-font-size.scss
+++ b/src/scss/function/_calc-font-size.scss
@@ -1,21 +1,24 @@
 @charset "utf-8";
+
+@use 'strip-unit';
+
 // ===================================================================
 // px to em
 // ===================================================================
 
 @function px2em($px, $base: 16) {
-	@return strip-unit($px) / strip-unit($base) * 1em;
+	@return strip-unit.strip-unit($px) / strip-unit.strip-unit($base) * 1em;
 }
 
 @function px2rem($px, $base: 16) {
-	@return strip-unit($px) / strip-unit($base) * 1rem;
+	@return strip-unit.strip-unit($px) / strip-unit.strip-unit($base) * 1rem;
 }
 // ===================================================================
 // percent to px
 // ===================================================================
 
 @function percent2px($percent, $base: 16) {
-  @return strip-unit($base) * (strip-unit($percent) / 100) * 1px;
+  @return strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100) * 1px;
 }
 
 // ===================================================================
@@ -23,11 +26,11 @@
 // ===================================================================
 
 @function percent2em($percent, $base: 16) {
-  @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1em;
+  @return (strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100)) / strip-unit.strip-unit($base) * 1em;
 }
 
 @function percent2rem($percent, $base: 16) {
-  @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1rem;
+  @return (strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100)) / strip-unit.strip-unit($base) * 1rem;
 }
 
 // ===================================================================
@@ -35,9 +38,9 @@
 // ===================================================================
 
 @function em2px($em, $base: 16) {
-  @return strip-unit($em) * strip-unit($base) * 1px;
+  @return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px;
 }
 
 @function rem2px($rem, $base: 16) {
-  @return strip-unit($rem) * strip-unit($base) * 1px;
+  @return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px;
 }
diff --git a/src/scss/function/_calc-stack.scss b/src/scss/function/_calc-stack.scss
index 3647d85..cb9f05e 100644
--- a/src/scss/function/_calc-stack.scss
+++ b/src/scss/function/_calc-stack.scss
@@ -1,21 +1,28 @@
 @charset "utf-8";
 
+// Built-In Modules
+@use 'sass:math';
+
+// Included Modules
+@use 'calc-font-size';
+@use 'strip-unit';
+
 @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;
+	$line-height: strip-unit.strip-unit($line-height) * strip-unit.strip-unit($base);
+	@return $line-height / strip-unit.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);
+	@if math.unit($font-size) == '%' {
+		$font-size: calc-font-size.percent2px($font-size, $base);
+	} @else if math.unit($font-size) == 'em' {
+		$font-size: calc-font-size.em2px($font-size, $base);
+	} @else if math.unit($font-size,) == 'rem' {
+		$font-size: calc-font-size.rem2px($font-size, $base);
 	}
 
-	$font-size: strip-unit($font-size);
-	$line-space: strip-unit($line-space);
+	$font-size: strip-unit.strip-unit($font-size);
+	$line-space: strip-unit.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
index 75f341c..3867958 100644
--- a/src/scss/function/_contrast-color.scss
+++ b/src/scss/function/_contrast-color.scss
@@ -1,9 +1,13 @@
+@charset "utf-8";
+
+// Built-In Modules
+@use 'sass:math';
+@use 'sass:color';
+
 // ===================================================================
 // contrast color
 // ===================================================================
 
-@charset "utf-8";
-
 @function contrast-color($color: null, $dark: #000, $light: #fff) {
 	@if $color == null {
 		@return null;
@@ -13,10 +17,10 @@
 		$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);
+		@return if(math.abs($color-brightness - $light-color-brightness) > math.abs($color-brightness - $dark-color-brightness), $light, $dark);
 	}
 }
 
 @function brightness($color: null) {
-	@return ((red($color) * 299) + (green($color) * 587) + (blue($color) * 114)) / 1000;
+	@return ((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114)) / 1000;
 }
diff --git a/src/scss/function/_index.scss b/src/scss/function/_index.scss
new file mode 100644
index 0000000..41e990a
--- /dev/null
+++ b/src/scss/function/_index.scss
@@ -0,0 +1,4 @@
+@use 'calc-font-size';
+@use 'calc-stack';
+@use 'strip-unit';
+@use 'contrast-color';
diff --git a/src/scss/function/_strip-unit.scss b/src/scss/function/_strip-unit.scss
index b38fdfe..99794b6 100644
--- a/src/scss/function/_strip-unit.scss
+++ b/src/scss/function/_strip-unit.scss
@@ -1,13 +1,17 @@
 @charset "utf-8";
 
+// Built-In Modules
+@use 'sass:meta';
+@use 'sass:math';
+
 @function strip-unit($value) {
-	@if type-of($value) == 'number' and unitless($value) == false {
+	@if meta.type-of($value) == 'number' and math.is-unitless($value) == false {
 		@return $value / ($value * 0 + 1);
-	} @else if type-of($value) == 'number' {
+	} @else if meta.type-of($value) == 'number' {
 		@return $value;
 	} @else {
 		@warn $value;
-		@warn type-of($value);
+		@warn meta.type-of($value);
 		@error "error strip unit"
 	}
 }
diff --git a/src/scss/theme.scss b/src/scss/theme.scss
index e43d9b4..25e2e04 100644
--- a/src/scss/theme.scss
+++ b/src/scss/theme.scss
@@ -1,9 +1,4 @@
-@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
-@import 'function';
-
-@import 'variable';
-
-@import "foundation";
-@import "structure";
-@import "component";
-@import "project";
+@use "foundation";
+@use "structure";
+@use "component";
+@use "project";