diff --git a/_sass/_base.scss b/_sass/_base.scss
index 055099c..ff6505f 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use 'settings' as *;
+
 /**
  * Reset some basic elements
  */
diff --git a/_sass/_chaospott.scss b/_sass/_chaospott.scss
index b40270a..908379d 100644
--- a/_sass/_chaospott.scss
+++ b/_sass/_chaospott.scss
@@ -1,3 +1,5 @@
+@use 'settings' as *;
+
 @font-face {
   font-family: 'Share Tech';
   font-style: normal;
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 61bb8c5..8f052eb 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -1,3 +1,6 @@
+@use 'base';
+@use 'settings' as *;
+
 /**
  * Site header
  */
diff --git a/_sass/_settings.scss b/_sass/_settings.scss
new file mode 100644
index 0000000..59cce36
--- /dev/null
+++ b/_sass/_settings.scss
@@ -0,0 +1,36 @@
+@use 'sass:color';
+
+// Our variables
+$base-font-family: 'Share Tech', 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: #d2d4bc;
+$brand-color: #2a7ae2;
+
+$grey-color: #828282;
+$grey-color-light: color.adjust($grey-color, $lightness: 40%, $space: hsl);
+$grey-color-dark: color.adjust($grey-color, $lightness: -25%, $space: hsl);
+
+$on-palm: 600px;
+$on-laptop: 800px;
+
+$nav-link-color: #800032;
+
+
+// Using media queries with like this:
+// @include media-query($palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss
index ceae321..e20e062 100644
--- a/_sass/_syntax-highlighting.scss
+++ b/_sass/_syntax-highlighting.scss
@@ -1,3 +1,5 @@
+@use 'base';
+
 /**
  * Syntax highlighting styles
  */
@@ -197,4 +199,4 @@
     .il {
         color: #099
     } // Literal.Number.Integer.Long
-}
\ No newline at end of file
+}
diff --git a/css/main.scss b/css/main.scss
index 31dff2b..0c91951 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -4,47 +4,8 @@
 
 @charset "utf-8";
 
-@use 'sass:color';
-
-// Our variables
-$base-font-family: 'Share Tech', 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: #d2d4bc;
-$brand-color: #2a7ae2;
-
-$grey-color: #828282;
-$grey-color-light: color.adjust($grey-color, $lightness: 40%, $space: hsl);
-$grey-color-dark: color.adjust($grey-color, $lightness: -25%, $space: hsl);
-
-$on-palm: 600px;
-$on-laptop: 800px;
-
-$nav-link-color: #800032;
-
-
-// Using media queries with like this:
-// @include media-query($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",
-"chaospott",
-"calendar";
+@use "base";
+@use "layout";
+@use "syntax-highlighting";
+@use "chaospott";
+@use "calendar";