Move rules into separate files

I suffered so much to make this work.
In order to get global variables to work,
they make you suffer.
I absolutely loathe this solution.

src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss

@@ -0,0 +1,34 @@
+@use "sass:color";
+@use "sass:math";
+
+$-color-white: hsl(280 30% 80%);
+$-color-dark:  color.adjust($-color-white, $lightness: -50%);
+$-color-light: hsl(190 80% 30%);
+$-ff-serif: ["Inconsolata", monospace];
+$-ff-sans: ["Jost", sans-serif];
+$-fs-900: math.div(100rem, 16);
+
+@forward "base" with (
+  $color-white: $-color-white,
+  $color-dark: $-color-dark,
+  $color-light: $-color-light,
+  $ff-serif: $-ff-serif,
+  $ff-sans: $-ff-sans,
+  $fs-900: $-fs-900
+);
+
+@font-face {
+  font-family: "Inconsolata";
+  src: url("fonts/Inconsolata.ttf");
+
+  font-display: swap;
+  font-variation-settings: "wdth" 85;
+}
+
+@font-face {
+  font-family: "Jost";
+  src: url("fonts/Jost.ttf");
+
+  font-display: swap;
+}
+

src/cool-stuff/css-purgatory/waltuh/scss/base.scss

@@ -1,3 +1,8 @@
+//
+//
+// Do Not Change This File!
+//
+//
 @use "sass:math";
 /* ----------------- */
 /* Custom Properties */
@@ -10,27 +15,26 @@
 
   /* colors */
 
-$color-dark:  hsl(0 0% 0%); /* Black */
+$color-dark:  hsl(0 0% 0%) !default; /* Black */
-$color-light: hsl(0 0% 50%); /* Gray */
+$color-light: hsl(0 0% 50%) !default; /* Gray */
-$color-white: hsl(0 0% 100%);/* White */
+$color-white: hsl(0 0% 100%) !default;/* White */
 
   /* font */
 
   /* Sizes divided by 16 so values given in px */
-$fs-900: math.div(125rem, 16);
+$fs-900: math.div(125rem, 16) !default;
-$fs-800: math.div(75rem, 16);
+$fs-800: math.div(75rem, 16) !default;
-$fs-700: math.div(56rem, 16);
+$fs-700: math.div(56rem, 16) !default;
-$fs-600: math.div(32rem, 16);
+$fs-600: math.div(32rem, 16) !default;
-$fs-500: math.div(28rem, 16);
+$fs-500: math.div(28rem, 16) !default;
-$fs-400: math.div(24rem, 16);
+$fs-400: math.div(24rem, 16) !default;
-$fs-300: math.div(18rem, 16);
+$fs-300: math.div(18rem, 16) !default;
-$fs-200: math.div(16rem, 16);
+$fs-200: math.div(16rem, 16) !default;
 
-$ff-serif: serif;
+$ff-serif: serif !default;
-$ff-sans-cond: sans-serif;
+$ff-sans-cond: sans-serif !default;
-$ff-sans: sans-serif;
+$ff-sans: sans-serif !default;
 
-@mixin utility{
 /* --------------- */
 /* Utility Classes */
 /* --------------- */
@@ -133,9 +137,7 @@ section:not(:last-of-type) {
 footer {
   margin-top: 3vh;
 }
-}
 
-@mixin reset {
 /* ----- */
 /* Reset */
 /* ----- */
@@ -159,6 +161,7 @@ h1, h2, h3 {
 }
 
 body {
+  @debug "In base.body, #{$color-dark}";
   font-family: $ff-sans;
   font-size: $fs-400;
   color: $color-dark;
@@ -199,8 +202,6 @@ input, button, textarea, select {
 	}
 }
 
-}
-
 /* -------------------- */
 /* Non-Reusable Classes */
 /* -------------------- */

src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss

@@ -0,0 +1,3 @@
+@forward "header";
+@forward "overlay";
+@forward "marks";

src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss

@@ -0,0 +1,39 @@
+@use "sass:math";
+@use "sass:color";
+@use "../variables" as *;
+
+
+@keyframes waltuh-gradient-anim {
+  $r: 6em;
+  $pd: math.div(2*math.$pi,10);
+  from {
+    background-position: 6em 0em;
+  }
+  @for $i from 1 through 9 {
+    #{$i*10}% {
+      background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
+    }
+  }
+  to {
+    background-position: 6em 0em;
+  }
+}
+@keyframes wipeIn {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+mark.waltuh-gradient {
+  font-weight: 600;
+
+  color: transparent;
+  $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
+  $grad2: color.adjust($grad1, $lightness: +30%);
+  background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
+  background-size: 30vmin 30vmin;
+  background-clip: text;
+
+  animation: waltuh-gradient-anim 12s linear infinite,
+  wipeIn 0.25s ease-in;
+
+}

src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss

@@ -0,0 +1,16 @@
+@keyframes overlay-breathe {
+  from {opacity: 0.04;}
+  to {opacity: 0.12;}
+}
+#overlay {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+
+  opacity: 0.10;
+  z-index: 1;
+  background-image: url('https://ilia.moe/img/noise.gif');
+  background-size: 25%;
+
+  animation: overlay-breathe 4s ease infinite alternate;
+}

src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss

@@ -1,38 +1,12 @@
-@use "sass:color";
-@use "sass:math";
-@use "base" as *;
-
 /* ------ */
 /*        */
 /* Waltuh */
 /*        */
 /* ------ */
 
-/* Initial Variable Resets */
+// Global Variables
-
+@use "variables" as *;
-$color-white: hsl(280 30% 80%);
+@use "components";
-$color-dark:  color.adjust($color-white, $lightness: -50%);
-$color-light: hsl(190 80% 30%);
-
-@font-face {
-  font-family: "Inconsolata";
-  src: url("fonts/Inconsolata.ttf");
-
-  font-display: swap;
-  font-variation-settings: "wdth" 85;
-}
-
-@font-face {
-  font-family: "Jost";
-  src: url("fonts/Jost.ttf");
-
-  font-display: swap;
-}
-
-$ff-serif: "Inconsolata", monospace;
-$ff-sans: "Jost", sans-serif;
-$fs-900: math.div(100rem, 16);
-@debug "ff-serif is #{$ff-serif}";
 
 .fs-900 { font-size: $fs-900; font-weight: 400;}
 .fs-800 { font-size: $fs-800; font-weight: 300;}
@@ -40,60 +14,3 @@ $fs-900: math.div(100rem, 16);
 .fs-600 { font-size: $fs-600; font-weight: 300;}
 .fs-500 { font-size: $fs-500; font-weight: 200;}
 .fs-400 { font-size: $fs-400; font-weight: 200;}
-
-/* --- */
-
-@include utility;
-@include reset;
-
-@keyframes waltuh-gradient-anim {
-  $r: 6em;
-  $pd: math.div(2*math.$pi,10);
-  from {
-    background-position: 6em 0em;
-  }
-  @for $i from 1 through 9 {
-    #{$i*10}% {
-      background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
-    }
-  }
-  to {
-    background-position: 6em 0em;
-  }
-}
-@keyframes wipeIn {
-  from { clip-path: inset(0 100% 0 0); }
-  to { clip-path: inset(0 0 0 0); }
-}
-
-.waltuh-gradient {
-  font-weight: 600;
-
-  color: transparent;
-  $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
-  $grad2: color.adjust($grad1, $lightness: +30%);
-  background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
-  background-size: 30vmin 30vmin;
-  background-clip: text;
-
-  animation: waltuh-gradient-anim 12s linear infinite,
-  wipeIn 0.25s ease-in;
-
-}
-
-@keyframes overlay-breathe {
-  from {opacity: 0.04;}
-  to {opacity: 0.12;}
-}
-#overlay {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-
-  opacity: 0.10;
-  z-index: 1;
-  background-image: url('https://ilia.moe/img/noise.gif');
-  background-size: 25%;
-
-  animation: overlay-breathe 4s ease infinite alternate;
-}