diff --git a/README.md b/README.md
index 0bfd20d88c..dcf6e293f2 100644
--- a/README.md
+++ b/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.
diff --git a/_sass/minima.scss b/_sass/minima.scss
index cb0865b1a2..2ee10cbd03 100644
--- a/_sass/minima.scss
+++ b/_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 *;
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
index fd2a0aff1b..2a39f769ab 100644
--- a/_sass/minima/_base.scss
+++ b/_sass/minima/_base.scss
@@ -1,3 +1,9 @@
+@charset "utf-8";
+
+@use "sass:color";
+
+@use "common" as *;
+
 /**
  * Reset some basic elements
  */
@@ -107,7 +113,7 @@ a {
   text-decoration: none;
 
   &:visited {
-    color: darken($brand-color, 15%);
+    color: color.adjust($brand-color, $lightness: -15%);
   }
 
   &:hover {
@@ -232,21 +238,21 @@ table {
   margin-bottom: $spacing-unit;
   width: 100%;
   text-align: $table-text-align;
-  color: lighten($text-color, 18%);
+  color: color.adjust($text-color, $lightness: 18%);
   border-collapse: collapse;
   border: 1px solid $grey-color-light;
   tr {
     &:nth-child(even) {
-      background-color: lighten($grey-color-light, 6%);
+      background-color: color.adjust($grey-color-light, $lightness: 6%);
     }
   }
   th, td {
     padding: ($spacing-unit * 0.3333333333) ($spacing-unit * 0.5);
   }
   th {
-    background-color: lighten($grey-color-light, 3%);
-    border: 1px solid darken($grey-color-light, 4%);
-    border-bottom-color: darken($grey-color-light, 12%);
+    background-color: color.adjust($grey-color-light, $lightness: 3%);
+    border: 1px solid color.adjust($grey-color-light, $lightness: -4%);
+    border-bottom-color: color.adjust($grey-color-light, $lightness: -12%);
   }
   td {
     border: 1px solid $grey-color-light;
diff --git a/_sass/minima/_common.scss b/_sass/minima/_common.scss
new file mode 100644
index 0000000000..19f63c44c9
--- /dev/null
+++ b/_sass/minima/_common.scss
@@ -0,0 +1,46 @@
+@charset "utf-8";
+
+@use "sass:color";
+
+// 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: color.adjust($grey-color, $lightness: 40%) !default;
+$grey-color-dark:  color.adjust($grey-color, $lightness: -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;
+}
diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
index 3e7f132b88..6435a4e806 100644
--- a/_sass/minima/_layout.scss
+++ b/_sass/minima/_layout.scss
@@ -1,3 +1,8 @@
+@charset "utf-8";
+
+@use "common" as *;
+@use "base" as *;
+
 /**
  * Site header
  */
diff --git a/_sass/minima/_syntax-highlighting.scss b/_sass/minima/_syntax-highlighting.scss
index bccdb89953..50ef041f00 100644
--- a/_sass/minima/_syntax-highlighting.scss
+++ b/_sass/minima/_syntax-highlighting.scss
@@ -1,3 +1,7 @@
+@charset "utf-8";
+
+@use "base" as *;
+
 /**
  * Syntax highlighting styles
  */
diff --git a/assets/main.scss b/assets/main.scss
index c60ebe425a..1498e71dda 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -2,4 +2,4 @@
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
 
-@import "minima";
+@forward "minima";