refactor(sass): migrate to @use modules and extract vars/mixins

Updates theme to modern Sass module system to resolve build errors caused
by deprecated @import behavior and missing variable/mixin scope.

Author: j4y

_sass/_base.scss

@@ -1,3 +1,9 @@
+@use "sass:color";
+
+@use "mixins" as *;
+@use "variables" as *;
+
+
 /**
  * Reset some basic elements
  */
@@ -9,7 +15,6 @@ dl, dd, ol, ul, figure {
 }
 
 
-
 /**
  * Basic styling
  */
@@ -160,7 +165,7 @@ pre {
     margin-left: auto;
     padding-right: $spacing-unit;
     padding-left: $spacing-unit;
-    @extend %clearfix;
+    @extend %clearfix !optional;
 
     @include media-query($on-laptop) {
         max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));

_sass/_layout.scss

@@ -1,3 +1,6 @@
+@use "variables" as *;
+@use "mixins" as *;
+
 /**
  * Site header
  */
@@ -111,7 +114,7 @@
     font-size: 15px;
     color: $grey-color;
     margin-left: calc($spacing-unit / 2);
-    @extend %clearfix;
+    @extend %clearfix !optional;
 }
 
 .footer-col {

_sass/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+

_sass/_syntax-highlighting.scss

@@ -3,7 +3,8 @@
  */
 .highlight {
     background: #fff;
-    @extend %vertical-rhythm;
+    @extend %vertical-rhythm !optional;
+
 
     .c     { color: #998; font-style: italic } // Comment
     .err   { color: #a61717; background-color: #e3d2d2 } // Error

_sass/_variables.scss

@@ -0,0 +1,22 @@
+@use "sass:color";
+
+$base-font-family: Helvetica, Arial, sans-serif;
+$base-font-size: 16px;
+$small-font-size: $base-font-size * 0.875;
+$base-line-height: 1.5;
+
+$spacing-unit: 30px;
+
+$text-color: #111;
+$background-color: #fdfdfd;
+$brand-color: #2a7ae2;
+
+$grey-color: #828282;
+$grey-color-light: color.scale($grey-color, $lightness: 40%);
+$grey-color-dark: color.scale($grey-color, $lightness: -25%);
+
+$content-width: 800px;
+
+$on-palm: 600px;
+$on-laptop: 800px;
+

css/main.scss

@@ -3,47 +3,12 @@
 sitemap_exclude: true
 ---
 
+
 @charset "utf-8";
 @use "sass:color";
+@use "variables" as *;
+@use "mixins" as *;
+@use "base" as *;
+@use "layout" as *;
+@use "syntax-highlighting" as *;
 
-// Variables
-$base-font-family: Helvetica, Arial, sans-serif;
-$base-font-size: 16px;
-$small-font-size: $base-font-size * 0.875;
-$base-line-height: 1.5;
-
-$spacing-unit: 30px;
-
-$text-color: #111;
-$background-color: #fdfdfd;
-$brand-color: #2a7ae2;
-
-$grey-color: #828282;
-$grey-color-light: color.scale($grey-color, $lightness: 40%);
-$grey-color-dark: color.scale($grey-color, $lightness: -25%);
-
-// Width of the content area
-$content-width: 800px;
-
-$on-palm: 600px;
-$on-laptop: 800px;
-
-// Media query mixin
-// Usage:
-// @include media-query($on-palm) {
-//   .wrapper {
-//     padding-right: $spacing-unit / 2;
-//     padding-left: $spacing-unit / 2;
-//   }
-// }
-@mixin media-query($device) {
-  @media screen and (max-width: $device) {
-    @content;
-  }
-}
-
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import
-  "base",
-  "layout",
-  "syntax-highlighting";