perf: change stack to css custom properties

2 files changed, 42 insertions, 15 deletions

diff --git a/src/scss/_component.scss b/src/scss/_component.scss
index c70304a..8e7a64b 100644
--- a/src/scss/_component.scss
+++ b/src/scss/_component.scss
@@ -1,5 +1,5 @@
 main * {
-	@extend .stack-first;
+	@extend .first-stack;
 }
 
 main {
@@ -20,12 +20,12 @@ main {
 
 	li > ul,
 	li > ol {
-		@extend .stack-unset;
+		@extend .unset-stack;
 	}
 }
 
 figure > figcaption {
-	@extend .stack-reset;
+	@extend .none-stack;
 }
 
 .table_of_contents,
@@ -45,7 +45,7 @@ figure > figcaption {
 	@include grid($flex-wrap: nowrap, $justify-content: space-between);
 	font-weight: bold;
 	> * {
-		@extend .stack-reset;
+		@extend .none-stack;
 	}
 }
 .nav-prev {}
diff --git a/src/scss/foundation/_stack.scss b/src/scss/foundation/_stack.scss
index 70f25a4..d7d3cb1 100644
--- a/src/scss/foundation/_stack.scss
+++ b/src/scss/foundation/_stack.scss
@@ -1,28 +1,55 @@
 /*-----------------------*
 		stack
 *-----------------------*/
-.stack-first {
-	margin-top: 0;
-	margin-bottom: 0;
+:root {
+	--const-stack: #{$default-stack};
+	--stack-top: #{$default-stack};
+	--stack-bottom: 0;
+	--first-stack-top: 0;
+	--first-stack-bottom: 0;
+	--last-stack-top: 0;
+	--last-stack-bottom: 0;
+}
+
+.first-stack {
+	margin-top: var(--first-stack-top, unset);
+	margin-bottom: var(--first-stack-bottom, unset);
 }
 
 .stack {
-	margin-top: $default-stack;
+	margin-top: var(--stack-top, unset);
+	margin-bottom: var(--stack-bottom, unset);
+}
+
+.last-stack {
+	margin-top: var(--last-stack-top, unset);
+	margin-bottom: var(--last-stack-bottom, unset);
 }
 
-.stack--by2 {
-	margin-top: $default-stack * 2;
+.stack-multi--by2 {
+	margin-top: calc(var(--first-stack-top, unset) * 2);
+	margin-bottom: calc(var(--first-stack-bottom, unset) * 2);
 }
 
-.stack--by4 {
-	margin-top: $default-stack * 4;
+.stack-multi--by4 {
+	margin-top: calc(var(--first-stack-top, unset) * 4);
+	margin-bottom: calc(var(--first-stack-bottom, unset) * 4);
 }
 
-.stack-reset {
+.stack-divi--by2 {
+	margin-top: calc(var(--first-stack-top, unset) / 2);
+	margin-bottom: calc(var(--first-stack-bottom, unset) / 2);
+}
+
+.none-stack {
 	margin-top: 0;
 }
 
-.stack-unset {
+.unset-stack {
 	margin-top: unset;
-	margin-bottom: unset;
+}
+
+.reverse-stack {
+	margin-top: var(--stack-bottom, unset);
+	margin-bottom: var(--stack-top, unset);
 }