Address Sass '@import' deprecation warnings

README.md

@@ -53,6 +53,7 @@ Refers to snippets of code within the `_includes` directory that can be inserted
 Refers to `.scss` files within the `_sass` directory that define the theme's styles.
 
   - `minima.scss` — The core file imported by preprocessed `main.scss`, it defines the variable defaults for the theme and also further imports sass partials to supplement itself.
+  - `minima/_common.scss` — Common styling and mixins leveraged throughout the minima theme.
   - `minima/_base.scss` — Resets and defines base styles for various HTML elements.
   - `minima/_layout.scss` — Defines the visual style for various layouts.
   - `minima/_syntax-highlighting.scss` — Defines the styles for syntax-highlighting.

_sass/minima.scss

@@ -1,51 +1,6 @@
 @charset "utf-8";
 
-// Define defaults for each variable.
-
-$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$base-font-size:   16px !default;
-$base-font-weight: 400 !default;
-$small-font-size:  $base-font-size * 0.875 !default;
-$base-line-height: 1.5 !default;
-
-$spacing-unit:     30px !default;
-
-$text-color:       #111 !default;
-$background-color: #fdfdfd !default;
-$brand-color:      #2a7ae2 !default;
-
-$grey-color:       #828282 !default;
-$grey-color-light: lighten($grey-color, 40%) !default;
-$grey-color-dark:  darken($grey-color, 25%) !default;
-
-$table-text-align: left !default;
-
-// Width of the content area
-$content-width:    800px !default;
-
-$on-palm:          600px !default;
-$on-laptop:        800px !default;
-
-// Use media queries like this:
-// @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;
-  }
-}
-
-@mixin relative-font-size($ratio) {
-  font-size: $base-font-size * $ratio;
-}
-
 // Import partials.
-@import
-  "minima/base",
-  "minima/layout",
-  "minima/syntax-highlighting"
-;
+@use "minima/base" as *;
+@use "minima/layout" as *;
+@use "minima/syntax-highlighting" as *;

_sass/minima/_base.scss

@@ -1,3 +1,7 @@
+@charset "utf-8";
+
+@use "common" as *;
+
 /**
  * Reset some basic elements
  */

_sass/minima/_common.scss

@@ -0,0 +1,44 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$text-color:       #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color:      #2a7ae2 !default;
+
+$grey-color:       #828282 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark:  darken($grey-color, 25%) !default;
+
+$table-text-align: left !default;
+
+// Width of the content area
+$content-width:    800px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+// Use media queries like this:
+// @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;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}

_sass/minima/_layout.scss

@@ -1,3 +1,8 @@
+@charset "utf-8";
+
+@use "common" as *;
+@use "base" as *;
+
 /**
  * Site header
  */

_sass/minima/_syntax-highlighting.scss

@@ -1,3 +1,7 @@
+@charset "utf-8";
+
+@use "base" as *;
+
 /**
  * Syntax highlighting styles
  */

assets/main.scss

@@ -2,4 +2,4 @@
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
 
-@import "minima";
+@forward "minima";