Update SASS deprecations

Author: makermelissa

sass/base/_base.scss

@@ -1,3 +1,6 @@
+@use "../base/variables" as *;
+@use "sass:color";
+
 html {
     box-sizing: border-box;
 }
@@ -64,7 +67,7 @@ h5 {
     }
 
     &:hover {
-        background-color: darken($purple, 15%);
+        background-color: color.adjust($purple, $lightness: -15%);
     }
 
     &.hidden {
@@ -77,7 +80,7 @@ h5 {
     background-color: $gray;
 
     &:hover {
-        background-color: darken($gray, 15%);
+        background-color: color.adjust($gray, $lightness: -15%);
     }
 }
 

sass/layout/_grid.scss

@@ -1,3 +1,5 @@
+@use "../base/variables" as *;
+
 .container {
     width: 100%;
     margin: 0 auto;

sass/layout/_header.scss

@@ -1,3 +1,6 @@
+@use "../base/variables" as *;
+@use "../base/mixins" as *;
+
 #site-header {
     display: grid;
     grid-template-rows: 1fr 3px;

sass/layout/_header_mobile.scss

@@ -1,3 +1,5 @@
+@use "../base/variables" as *;
+
 #mobile-header {
     display: none;
     background-color: #333;

sass/layout/_layout.scss

@@ -1,3 +1,6 @@
+@use "../base/variables" as *;
+@use "sass:color";
+
 .layout {
     height: 100vh;
     height: calc(var(--vh, 1vh) * 100);
@@ -170,7 +173,7 @@
     background-color: $gray;
 
     &:hover {
-        background-color: darken($gray, 15%);
+        background-color: color.adjust($gray, $lightness: -15%);
     }
 
     &.active {

sass/style.scss

@@ -1,17 +1,17 @@
 @charset "utf-8";
 
-@import '/node_modules/@fortawesome/fontawesome-free/css/all.min.css';
-@import '/node_modules/@xterm/xterm/css/xterm.css';
+@use '/node_modules/@fortawesome/fontawesome-free/css/all.min.css';
+@use '/node_modules/@xterm/xterm/css/xterm.css';
 
-@import './vendors/normalize';
+@use 'vendors/normalize';
 
-@import './base/variables';
-@import './base/typography';
-@import './base/mixins';
-@import './base/base';
+@use 'base/variables';
+@use 'base/typography';
+@use 'base/mixins';
+@use 'base/base';
 
-@import './layout/layout';
-@import './layout/grid';
-@import './layout/editor';
-@import './layout/header';
-@import './layout/header_mobile';
+@use 'layout/layout';
+@use 'layout/grid';
+@use 'layout/editor';
+@use 'layout/header';
+@use 'layout/header_mobile';