Finalize step to SCSS syntax

src/style/_colors.sass

-@import palette
-
-// Calc color by base color name and level.
-@function get-color($name, $level)
-    $color: map-get($palette, $name)
-    $mix-color: if($level < 0, black, white)
-
-    @for $i from 0 to $level
-        $x: lightness($color)
-        $percentage: map-get(map-get($mix-intervals, $name), $level)
-        $percentage: if($percentage == null, 26%, $percentage)
-
-        $color: mix($mix-color, $color, $percentage)
-
-    @return $color
-
-// Add foreground and background classes for all colors.
-@each $color-name in map-keys($palette)
-    @for $i from -5 through 5
-        .bg-#{$color-name}-#{map-get($shade-names, $i)}
-            background-color: get-color($color-name, $i)
-        .colorbox.bg-#{$color-name}-#{map-get($shade-names, $i)}::after
-            font-weight: normal
-            content: " (#{get-color($color-name, $i)})"
-        .fg-#{$color-name}-#{map-get($shade-names, $i)}
-            color: get-color($color-name, $i)
-
-// Add black and white.
-.bg-black
-    background-color: black
-.fg-black
-    color: black
-.bg-white
-    background-color: white
-.fg-white
-    color: white
-

src/style/_colors.scss

+@import "palette";
+
+// Calc color by base color name and level.
+@function get-color($name, $level) {
+    $color: map-get($palette, $name);
+    $mix-color: if($level < 0, black, white);
+
+    @for $i from 0 to $level {
+        $x: lightness($color);
+        $percentage: map-get(map-get($mix-intervals, $name), $level);
+        $percentage: if($percentage == null, 26%, $percentage);
+
+        $color: mix($mix-color, $color, $percentage);
+    }
+
+    @return $color;
+}
+
+// Add foreground and background classes for all colors.
+@each $color-name in map-keys($palette) {
+    @for $i from -5 through 5 {
+        .bg-#{$color-name}-#{map-get($shade-names, $i)} {
+            background-color: get-color($color-name, $i);
+        }
+        .colorbox.bg-#{$color-name}-#{map-get($shade-names, $i)}::after {
+            font-weight: normal;
+            content: " (#{get-color($color-name, $i)})";
+        }
+        .fg-#{$color-name}-#{map-get($shade-names, $i)} {
+            color: get-color($color-name, $i);
+        }
+    }
+}
+
+// Add black and white.
+.bg-black {
+    background-color: black;
+}
+.fg-black {
+    color: black;
+}
+.bg-white {
+    background-color: white;
+}
+.fg-white {
+    color: white;
+}

src/style/_palette.scss

-// The palette maps are written in SCSS syntax as maps in SASS syntax currently doesn't support multiline, which makes maps really ugly.
-
 $palette: (
     "primary":    hsl( 36,  97%,  48%),
     "accent":     hsl(351,  86%,  48%),