diff --git a/_sass/minimal-mistakes.scss b/_sass/minimal-mistakes.scss
index 3b252e5..67620ee 100644
--- a/_sass/minimal-mistakes.scss
+++ b/_sass/minimal-mistakes.scss
@@ -1,40 +1,40 @@
-/*!
+/*!\
  * Minimal Mistakes Jekyll Theme 4.24.0 by Michael Rose
  * Copyright 2013-2020 Michael Rose - mademistakes.com | @mmistakes
  * Licensed under MIT (https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE)
-*/
+ */
 
 /* Variables */
-@import "minimal-mistakes/variables";
+@forward "minimal-mistakes/variables";
 
 /* Mixins and functions */
-@import "minimal-mistakes/vendor/breakpoint/breakpoint";
+@forward "minimal-mistakes/vendor/breakpoint/breakpoint";
 @include breakpoint-set("to ems", true);
-@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup
-@import "minimal-mistakes/vendor/susy/susy";
-@import "minimal-mistakes/mixins";
+@forward "minimal-mistakes/vendor/magnific-popup/magnific-popup";
+@forward "minimal-mistakes/vendor/susy/susy";
+@forward "minimal-mistakes/mixins";
 
 /* Core CSS */
-@import "minimal-mistakes/reset";
-@import "minimal-mistakes/base";
-@import "minimal-mistakes/forms";
-@import "minimal-mistakes/tables";
-@import "minimal-mistakes/animations";
+@forward "minimal-mistakes/reset";
+@forward "minimal-mistakes/base";
+@forward "minimal-mistakes/forms";
+@forward "minimal-mistakes/tables";
+@forward "minimal-mistakes/animations";
 
 /* Components */
-@import "minimal-mistakes/buttons";
-@import "minimal-mistakes/notices";
-@import "minimal-mistakes/masthead";
-@import "minimal-mistakes/navigation";
-@import "minimal-mistakes/footer";
-@import "minimal-mistakes/search";
-@import "minimal-mistakes/syntax";
+@forward "minimal-mistakes/buttons";
+@forward "minimal-mistakes/notices";
+@forward "minimal-mistakes/masthead";
+@forward "minimal-mistakes/navigation";
+@forward "minimal-mistakes/footer";
+@forward "minimal-mistakes/search";
+@forward "minimal-mistakes/syntax";
 
 /* Utility classes */
-@import "minimal-mistakes/utilities";
+@forward "minimal-mistakes/utilities";
 
 /* Layout specific */
-@import "minimal-mistakes/page";
-@import "minimal-mistakes/archive";
-@import "minimal-mistakes/sidebar";
-@import "minimal-mistakes/print";
+@forward "minimal-mistakes/page";
+@forward "minimal-mistakes/archive";
+@forward "minimal-mistakes/sidebar";
+@forward "minimal-mistakes/print";
diff --git a/_sass/minimal-mistakes/_buttons.scss b/_sass/minimal-mistakes/_buttons.scss
index 9ef60a8..ab5e4d1 100644
--- a/_sass/minimal-mistakes/_buttons.scss
+++ b/_sass/minimal-mistakes/_buttons.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    BUTTONS
    ========================================================================== */
@@ -56,7 +57,7 @@
       }
 
       &:hover {
-        @include yiq-contrasted(mix(#000, $color, 20%));
+        @include yiq-contrasted(color.mix(#000, $color, 20%));
       }
     }
   }
diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
index 80bd9c6..39abde4 100644
--- a/_sass/minimal-mistakes/_navigation.scss
+++ b/_sass/minimal-mistakes/_navigation.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    NAVIGATION
    ========================================================================== */
@@ -91,7 +92,7 @@
       text-align: center;
       text-decoration: none;
       color: $muted-text-color;
-      border: 1px solid mix(#000, $border-color, 25%);
+      border: 1px solid color.mix(#000, $border-color, 25%);
       border-radius: 0;
 
       &:hover {
@@ -140,7 +141,7 @@
     text-align: center;
     text-decoration: none;
     color: $muted-text-color;
-    border: 1px solid mix(#000, $border-color, 25%);
+    border: 1px solid color.mix(#000, $border-color, 25%);
     border-radius: $border-radius;
 
     &:hover {
@@ -395,7 +396,7 @@
       &:hover {
         color: #fff;
         border-color: $gray;
-        background-color: mix(white, #000, 20%);
+        background-color: color.mix(white, #000, 20%);
 
         &:before,
         &:after {
@@ -407,7 +408,7 @@
     /* selected*/
     input:checked + label {
       color: white;
-      background-color: mix(white, #000, 20%);
+      background-color: color.mix(white, #000, 20%);
 
       &:before,
       &:after {
diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss
index 90570b0..00d101c 100644
--- a/_sass/minimal-mistakes/_notices.scss
+++ b/_sass/minimal-mistakes/_notices.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    NOTICE TEXT BLOCKS
    ========================================================================== */
@@ -17,7 +18,7 @@
   font-family: $global-font-family;
   font-size: $type-size-6 !important;
   text-indent: initial; /* override*/
-  background-color: mix($background-color, $notice-color, $notice-background-mix);
+  background-color: color.mix($background-color, $notice-color, $notice-background-mix);
   border-radius: $border-radius;
   box-shadow: 0 1px 1px rgba($notice-color, 0.25);
 
@@ -46,19 +47,19 @@
   }
 
   a {
-    color: mix(#000, $notice-color, 10%);
+    color: color.mix(#000, $notice-color, 10%);
 
     &:hover {
-      color: mix(#000, $notice-color, 50%);
+      color: color.mix(#000, $notice-color, 50%);
     }
   }
 
   @at-root #{selector-unify(&, "blockquote")} {
-    border-left-color: mix(#000, $notice-color, 10%);
+    border-left-color: color.mix(#000, $notice-color, 10%);
   }
 
   code {
-    background-color: mix($background-color, $notice-color, $code-notice-background-mix)
+    background-color: color.mix($background-color, $notice-color, $code-notice-background-mix)
   }
 
 	pre code {
diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
index f8d0a50..e0c7c39 100644
--- a/_sass/minimal-mistakes/_page.scss
+++ b/_sass/minimal-mistakes/_page.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    SINGLE PAGE/POST
    ========================================================================== */
@@ -347,7 +348,7 @@ body {
   margin-bottom: 8px;
   padding: 5px 10px;
   text-decoration: none;
-  border: 1px solid mix(#000, $border-color, 25%);
+  border: 1px solid color.mix(#000, $border-color, 25%);
   border-radius: $border-radius;
 
   &:hover {
diff --git a/_sass/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/_search.scss
index fa7ee83..af44c38 100644
--- a/_sass/minimal-mistakes/_search.scss
+++ b/_sass/minimal-mistakes/_search.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    SEARCH
    ========================================================================== */
@@ -21,7 +22,7 @@
   transition: 0.2s;
 
   &:hover {
-    color: mix(#000, $primary-color, 25%);
+    color: color.mix(#000, $primary-color, 25%);
   }
 }
 
diff --git a/_sass/minimal-mistakes/_tables.scss b/_sass/minimal-mistakes/_tables.scss
index c270a77..fba6000 100644
--- a/_sass/minimal-mistakes/_tables.scss
+++ b/_sass/minimal-mistakes/_tables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    TABLES
    ========================================================================== */
@@ -18,7 +19,7 @@ table {
 
 thead {
   background-color: $border-color;
-  border-bottom: 2px solid mix(#000, $border-color, 25%);
+  border-bottom: 2px solid color.mix(#000, $border-color, 25%);
 }
 
 th {
@@ -29,7 +30,7 @@ th {
 
 td {
   padding: 0.5em;
-  border-bottom: 1px solid mix(#000, $border-color, 25%);
+  border-bottom: 1px solid color.mix(#000, $border-color, 25%);
 }
 
 tr,
diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
index 1c127d3..0905784 100644
--- a/_sass/minimal-mistakes/_utilities.scss
+++ b/_sass/minimal-mistakes/_utilities.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    UTILITY CLASSES
    ========================================================================== */
@@ -416,7 +417,7 @@ body:hover .visually-hidden button {
   .navicon,
   .navicon:before,
   .navicon:after {
-    background: mix(#000, $primary-color, 25%);
+    background: color.mix(#000, $primary-color, 25%);
   }
 
   &.close {
@@ -516,12 +517,12 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .footnote {
-  color: mix(#fff, $gray, 25%);
+  color: color.mix(#fff, $gray, 25%);
   text-decoration: none;
 }
 
 .footnotes {
-  color: mix(#fff, $gray, 25%);
+  color: color.mix(#fff, $gray, 25%);
 
   ol,
   li,
diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss
index 1578185..0e5c8e3 100644
--- a/_sass/minimal-mistakes/_variables.scss
+++ b/_sass/minimal-mistakes/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Variables
    ========================================================================== */
@@ -59,16 +60,16 @@ $h-size-6: 1em !default; // ~16px
    ========================================================================== */
 
 $gray: #7a8288 !default;
-$dark-gray: mix(#000, $gray, 50%) !default;
-$darker-gray: mix(#000, $gray, 60%) !default;
-$light-gray: mix(#fff, $gray, 50%) !default;
-$lighter-gray: mix(#fff, $gray, 90%) !default;
+$dark-gray: color.mix(#000, $gray, 50%) !default;
+$darker-gray: color.mix(#000, $gray, 60%) !default;
+$light-gray: color.mix(#fff, $gray, 50%) !default;
+$lighter-gray: color.mix(#fff, $gray, 90%) !default;
 
 $background-color: #fff !default;
 $code-background-color: #fafafa !default;
 $code-background-color-dark: $light-gray !default;
 $text-color: $dark-gray !default;
-$muted-text-color: mix(#fff, $text-color, 20%) !default;
+$muted-text-color: color.mix(#fff, $text-color, 20%) !default;
 $border-color: $lighter-gray !default;
 $form-background-color: $lighter-gray !default;
 $footer-background-color: $lighter-gray !default;
@@ -85,7 +86,7 @@ $warning-color: #d67f05 !default;
 $danger-color: #ee5f5b !default;
 $info-color: #3b9cba !default;
 $focus-color: $primary-color !default;
-$active-color: mix(#fff, $primary-color, 80%) !default;
+$active-color: color.mix(#fff, $primary-color, 80%) !default;
 
 /* YIQ color contrast */
 $yiq-contrasted-dark-default: $dark-gray !default;
@@ -120,12 +121,12 @@ $youtube-color: #bb0000 !default;
 $xing-color: #006567 !default;
 
 /* links */
-$link-color: mix(#000, $info-color, 20%) !default;
-$link-color-hover: mix(#000, $link-color, 25%) !default;
-$link-color-visited: mix(#fff, $link-color, 15%) !default;
+$link-color: color.mix(#000, $info-color, 20%) !default;
+$link-color-hover: color.mix(#000, $link-color, 25%) !default;
+$link-color-visited: color.mix(#fff, $link-color, 15%) !default;
 $masthead-link-color: $primary-color !default;
-$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
-$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
+$masthead-link-color-hover: color.mix(#000, $primary-color, 25%) !default;
+$navicon-link-color-hover: color.mix(#fff, $primary-color, 75%) !default;
 
 /* notices */
 $notice-background-mix: 80% !default;
diff --git a/_sass/minimal-mistakes/skins/_air.scss b/_sass/minimal-mistakes/skins/_air.scss
index 733404e..724cda1 100644
--- a/_sass/minimal-mistakes/skins/_air.scss
+++ b/_sass/minimal-mistakes/skins/_air.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Air skin
    ========================================================================== */
@@ -8,12 +9,12 @@ $text-color: #2a2a2a !default;
 $muted-text-color: $color-secondary !default;
 $primary-color: $color-primary !default;
 $accent-color: $color-accent !default;
-$border-color: mix(#fff, $text-color, 85%) !default;
+$border-color: color.mix(#fff, $text-color, 85%) !default;
 $footer-background-color: $primary-color !default;
 $link-color: $primary-color !default;
 $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
-$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+$navicon-link-color-hover: color.mix(#fff, $text-color, 80%) !default;
 
 .page__footer {
   color: #fff !important; // override
diff --git a/_sass/minimal-mistakes/skins/_aqua.scss b/_sass/minimal-mistakes/skins/_aqua.scss
index 7c3944e..b58e4cb 100644
--- a/_sass/minimal-mistakes/skins/_aqua.scss
+++ b/_sass/minimal-mistakes/skins/_aqua.scss
@@ -1,13 +1,14 @@
+@use "sass:color";
 /* ==========================================================================
    Aqua skin
    ========================================================================== */
 
 /* Colors */
 $gray                       : #1976d2 !default;
-$dark-gray                  : mix(#000, $gray, 40%) !default;
-$darker-gray                : mix(#000, $gray, 60%) !default;
-$light-gray                 : mix(#fff, $gray, 50%) !default;
-$lighter-gray               : mix(#fff, $gray, 90%) !default;
+$dark-gray                  : color.mix(#000, $gray, 40%) !default;
+$darker-gray                : color.mix(#000, $gray, 60%) !default;
+$light-gray                 : color.mix(#fff, $gray, 50%) !default;
+$lighter-gray               : color.mix(#fff, $gray, 90%) !default;
 
 $body-color                 : #fff !default;
 $background-color           : #f0fff0 !default;
@@ -24,10 +25,10 @@ $info-color                 : #03a9f4 !default;
 
 /* links */
 $link-color                 : $info-color !default;
-$link-color-hover           : mix(#000, $link-color, 25%) !default;
-$link-color-visited         : mix(#fff, $link-color, 25%) !default;
+$link-color-hover           : color.mix(#000, $link-color, 25%) !default;
+$link-color-visited         : color.mix(#fff, $link-color, 25%) !default;
 $masthead-link-color        : $primary-color !default;
-$masthead-link-color-hover  : mix(#000, $primary-color, 25%) !default;
+$masthead-link-color-hover  : color.mix(#000, $primary-color, 25%) !default;
 
 /* notices */
 $notice-background-mix: 90% !default;
diff --git a/_sass/minimal-mistakes/skins/_contrast.scss b/_sass/minimal-mistakes/skins/_contrast.scss
index 38283b8..81c6755 100644
--- a/_sass/minimal-mistakes/skins/_contrast.scss
+++ b/_sass/minimal-mistakes/skins/_contrast.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Contrast skin
    ========================================================================== */
@@ -6,12 +7,12 @@
 $text-color: #000 !default;
 $muted-text-color: $text-color !default;
 $primary-color: #ff0000 !default;
-$border-color: mix(#fff, $text-color, 75%) !default;
+$border-color: color.mix(#fff, $text-color, 75%) !default;
 $footer-background-color: #000 !default;
 $link-color: #0000ff !default;
 $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
-$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+$navicon-link-color-hover: color.mix(#fff, $text-color, 80%) !default;
 
 /* contrast syntax highlighting (base16) */
 $base00: #000000 !default;
diff --git a/_sass/minimal-mistakes/skins/_dark.scss b/_sass/minimal-mistakes/skins/_dark.scss
index 3805349..6ca28a2 100644
--- a/_sass/minimal-mistakes/skins/_dark.scss
+++ b/_sass/minimal-mistakes/skins/_dark.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Dark skin
    ========================================================================== */
@@ -6,17 +7,17 @@
 $background-color: #252a34 !default;
 $text-color: #eaeaea !default;
 $primary-color: #00adb5 !default;
-$border-color: mix(#fff, $background-color, 20%) !default;
-$code-background-color: mix(#000, $background-color, 15%) !default;
-$code-background-color-dark: mix(#000, $background-color, 20%) !default;
-$form-background-color: mix(#000, $background-color, 15%) !default;
-$footer-background-color: mix(#000, $background-color, 30%) !default;
-$link-color: mix($primary-color, $text-color, 40%) !default;
-$link-color-hover: mix(#fff, $link-color, 25%) !default;
-$link-color-visited: mix(#000, $link-color, 25%) !default;
+$border-color: color.mix(#fff, $background-color, 20%) !default;
+$code-background-color: color.mix(#000, $background-color, 15%) !default;
+$code-background-color-dark: color.mix(#000, $background-color, 20%) !default;
+$form-background-color: color.mix(#000, $background-color, 15%) !default;
+$footer-background-color: color.mix(#000, $background-color, 30%) !default;
+$link-color: color.mix($primary-color, $text-color, 40%) !default;
+$link-color-hover: color.mix(#fff, $link-color, 25%) !default;
+$link-color-visited: color.mix(#000, $link-color, 25%) !default;
 $masthead-link-color: $text-color !default;
-$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
-$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+$masthead-link-color-hover: color.mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: color.mix(#000, $background-color, 30%) !default;
 
 .author__urls.social-icons i,
 .author__urls.social-icons .svg-inline--fa,
diff --git a/_sass/minimal-mistakes/skins/_dirt.scss b/_sass/minimal-mistakes/skins/_dirt.scss
index 5090f55..cdc4b0a 100644
--- a/_sass/minimal-mistakes/skins/_dirt.scss
+++ b/_sass/minimal-mistakes/skins/_dirt.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Dirt skin
    ========================================================================== */
@@ -12,7 +13,7 @@ $footer-background-color: #e9dcbe !default;
 $link-color: #343434 !default;
 $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
-$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+$navicon-link-color-hover: color.mix(#fff, $text-color, 80%) !default;
 
 /* dirt syntax highlighting (base16) */
 $base00: #231e18 !default;
diff --git a/_sass/minimal-mistakes/skins/_mint.scss b/_sass/minimal-mistakes/skins/_mint.scss
index 28557a3..94a1962 100644
--- a/_sass/minimal-mistakes/skins/_mint.scss
+++ b/_sass/minimal-mistakes/skins/_mint.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Mint skin
    ========================================================================== */
@@ -7,12 +8,12 @@ $background-color: #f3f6f6 !default;
 $text-color: #40514e !default;
 $muted-text-color: #40514e !default;
 $primary-color: #11999e !default;
-$border-color: mix(#fff, #40514e, 75%) !default;
+$border-color: color.mix(#fff, #40514e, 75%) !default;
 $footer-background-color: #30e3ca !default;
 $link-color: #11999e !default;
 $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
-$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+$navicon-link-color-hover: color.mix(#fff, $text-color, 80%) !default;
 
 .page__footer {
   color: #fff !important; // override
diff --git a/_sass/minimal-mistakes/skins/_neon.scss b/_sass/minimal-mistakes/skins/_neon.scss
index a4f2ef5..6aee71c 100644
--- a/_sass/minimal-mistakes/skins/_neon.scss
+++ b/_sass/minimal-mistakes/skins/_neon.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Neon skin
    ========================================================================== */
@@ -6,17 +7,17 @@
 $background-color: #141010 !default;
 $text-color: #fff6fb !default;
 $primary-color: #f21368 !default;
-$border-color: mix(#fff, $background-color, 20%) !default;
-$code-background-color: mix(#000, $background-color, 15%) !default;
-$code-background-color-dark: mix(#000, $background-color, 20%) !default;
-$form-background-color: mix(#000, $background-color, 15%) !default;
-$footer-background-color: mix($primary-color, #000, 10%) !default;
+$border-color: color.mix(#fff, $background-color, 20%) !default;
+$code-background-color: color.mix(#000, $background-color, 15%) !default;
+$code-background-color-dark: color.mix(#000, $background-color, 20%) !default;
+$form-background-color: color.mix(#000, $background-color, 15%) !default;
+$footer-background-color: color.mix($primary-color, #000, 10%) !default;
 $link-color: $primary-color !default;
-$link-color-hover: mix(#fff, $link-color, 25%) !default;
-$link-color-visited: mix(#000, $link-color, 25%) !default;
+$link-color-hover: color.mix(#fff, $link-color, 25%) !default;
+$link-color-visited: color.mix(#000, $link-color, 25%) !default;
 $masthead-link-color: $text-color !default;
-$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
-$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+$masthead-link-color-hover: color.mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: color.mix(#000, $background-color, 30%) !default;
 
 /* notices */
 $notice-background-mix: 90% !default;
diff --git a/_sass/minimal-mistakes/skins/_plum.scss b/_sass/minimal-mistakes/skins/_plum.scss
index defa69c..2d72b82 100644
--- a/_sass/minimal-mistakes/skins/_plum.scss
+++ b/_sass/minimal-mistakes/skins/_plum.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Plum skin
    ========================================================================== */
@@ -6,17 +7,17 @@
 $background-color: #521477 !default;
 $text-color: #fffd86 !default;
 $primary-color: #c327ab !default;
-$border-color: mix(#fff, $background-color, 20%) !default;
-$code-background-color: mix(#000, $background-color, 15%) !default;
-$code-background-color-dark: mix(#000, $background-color, 20%) !default;
-$form-background-color: mix(#000, $background-color, 15%) !default;
-$footer-background-color: mix(#000, $background-color, 25%) !default;
+$border-color: color.mix(#fff, $background-color, 20%) !default;
+$code-background-color: color.mix(#000, $background-color, 15%) !default;
+$code-background-color-dark: color.mix(#000, $background-color, 20%) !default;
+$form-background-color: color.mix(#000, $background-color, 15%) !default;
+$footer-background-color: color.mix(#000, $background-color, 25%) !default;
 $link-color: $primary-color !default;
-$link-color-hover: mix(#fff, $link-color, 25%) !default;
-$link-color-visited: mix(#000, $link-color, 25%) !default;
+$link-color-hover: color.mix(#fff, $link-color, 25%) !default;
+$link-color-visited: color.mix(#000, $link-color, 25%) !default;
 $masthead-link-color: $text-color !default;
-$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
-$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+$masthead-link-color-hover: color.mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: color.mix(#000, $background-color, 30%) !default;
 
 /* notices */
 $notice-background-mix: 70% !default;
diff --git a/_sass/minimal-mistakes/skins/_sunrise.scss b/_sass/minimal-mistakes/skins/_sunrise.scss
index bc259f6..6f9bb79 100644
--- a/_sass/minimal-mistakes/skins/_sunrise.scss
+++ b/_sass/minimal-mistakes/skins/_sunrise.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==========================================================================
    Sunrise skin
    ========================================================================== */
@@ -8,17 +9,17 @@ $background-color: #e8d5b7 !default;
 $text-color: #000 !default;
 $muted-text-color: $dark-gray !default;
 $primary-color: #fc3a52 !default;
-$border-color: mix(#000, $background-color, 20%) !default;
-$code-background-color: mix(#fff, $background-color, 20%) !default;
-$code-background-color-dark: mix(#000, $background-color, 10%) !default;
-$form-background-color: mix(#fff, $background-color, 15%) !default;
+$border-color: color.mix(#000, $background-color, 20%) !default;
+$code-background-color: color.mix(#fff, $background-color, 20%) !default;
+$code-background-color-dark: color.mix(#000, $background-color, 10%) !default;
+$form-background-color: color.mix(#fff, $background-color, 15%) !default;
 $footer-background-color: #f9b248 !default;
-$link-color: mix(#000, $primary-color, 10%) !default;
-$link-color-hover: mix(#fff, $link-color, 25%) !default;
-$link-color-visited: mix(#000, $link-color, 25%) !default;
+$link-color: color.mix(#000, $primary-color, 10%) !default;
+$link-color-hover: color.mix(#fff, $link-color, 25%) !default;
+$link-color-visited: color.mix(#000, $link-color, 25%) !default;
 $masthead-link-color: $text-color !default;
-$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
-$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+$masthead-link-color-hover: color.mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: color.mix(#000, $background-color, 30%) !default;
 
 /* notices */
 $notice-background-mix: 75% !default;
diff --git a/assets/css/main.scss b/assets/css/main.scss
index af6159b..f9055e1 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -5,11 +5,10 @@ search: false
 
 @charset "utf-8";
 
-// Import variables before skin so color variables are available
-@import "minimal-mistakes/variables";
-
-@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
-@import "minimal-mistakes"; // main partials
+@use "sass:color";
+@use "minimal-mistakes/variables" as *;
+@use "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}" as *; // skin
+@use "minimal-mistakes" as *; // main partials
 
 /* Remove underline and set color to black */
 a {