clean up sass deprecation warnings, migrate to new functionality

Author: jwcooper

assets/css/main.scss

@@ -1,23 +1,22 @@
 ---
 ---
+
 @charset "utf-8";
 
-@import 'vendors/normalize';
+@use "../sass/vendors/normalize";
 
-@import 'base/variables';
-@import 'base/typography';
-@import 'base/base';
-@import 'base/mixins';
+@use "../sass/base/typography";
+@use "../sass/base/base";
 
-@import 'layout/grid';
-@import 'layout/header';
-@import 'layout/header_mobile';
+@use "../sass/layout/grid";
+@use "../sass/layout/header";
+@use "../sass/layout/header_mobile";
 
-@import 'pages/home';
-@import 'pages/common';
-@import 'pages/downloads';
-@import 'pages/download';
-@import 'pages/awesome';
-@import 'pages/libraries';
-@import 'pages/contributing';
-@import 'pages/espinstaller';
+@use "../sass/pages/home";
+@use "../sass/pages/common";
+@use "../sass/pages/downloads";
+@use "../sass/pages/download";
+@use "../sass/pages/awesome";
+@use "../sass/pages/libraries";
+@use "../sass/pages/contributing";
+@use "../sass/pages/espinstaller";

assets/sass/base/_base.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 body {
   font-family: "Proxima Nova", "Montserrat", "Lucida Grande",
     "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
@@ -32,7 +34,7 @@ a.purple-button-link {
   color: #fff;
   border-radius: 5px;
   border: none;
-  background-color: $purple;
+  background-color: variables.$purple;
 
   i {
     padding-left: 10px;

assets/sass/base/_mixins.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "variables";
 
 @mixin readable-content {
   display: grid;
@@ -19,11 +20,15 @@
   color: #fff;
   font-weight: 500;
   border-radius: 10px;
-  background-color: #63338f;
+  background-color: variables.$purple;
 
   &:hover {
     color: #fff;
-    background-color: color.adjust(#63338f, $lightness: -10%, $space: hsl);
+    background-color: color.adjust(
+      variables.$purple,
+      $lightness: -10%,
+      $space: hsl
+    );
   }
 }
 

assets/sass/layout/_header.scss

@@ -1,10 +1,13 @@
+@use "../base/mixins";
+@use "../base/variables";
+
 #site-header {
   display: grid;
   grid-template-rows: 40px 1fr;
   grid-column: full;
 
   .wrapper {
-    @include readable-content;
+    @include mixins.readable-content;
   }
 
   .content {
@@ -22,8 +25,8 @@
 }
 
 .top-navigation {
-  @include readable-content;
   background-color: #333;
+  @include mixins.readable-content;
 
   .navigation {
     margin-left: 15px;
@@ -64,7 +67,7 @@
     justify-content: end;
 
     a {
-      @include rounded-button;
+      @include mixins.rounded-button;
     }
   }
 }
@@ -97,7 +100,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@media (max-width: variables.$screen-xs-max) {
   #site-header {
     display: none !important;
   }

assets/sass/layout/_header_mobile.scss

@@ -1,3 +1,5 @@
+@use "../base/variables";
+
 #mobile-header {
   background-color: #333;
 
@@ -13,7 +15,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0,0,0,0);
+    clip: rect(0, 0, 0, 0);
     border: 0;
   }
 
@@ -60,9 +62,8 @@
   }
 }
 
-@media (min-width: $screen-xs-max) {
+@media (min-width: variables.$screen-xs-max) {
   #mobile-header {
     display: none !important;
   }
 }
-

assets/sass/pages/_awesome.scss

@@ -1,20 +1,22 @@
+@use "../base/variables";
+
 #awesome-page {
   .content {
     p {
       margin-bottom: 16px;
     }
 
     h2 {
-      border-bottom: 1px solid $gray-border;
-      padding-bottom: .3em;
+      border-bottom: 1px solid variables.$gray-border;
+      padding-bottom: 0.3em;
       margin-bottom: 16px;
       margin-top: 24px;
     }
 
     ul {
       margin-bottom: 16px;
       li {
-        margin-top: .25em;
+        margin-top: 0.25em;
       }
     }
   }

assets/sass/pages/_common.scss

@@ -1,3 +1,5 @@
+@use "../base/variables";
+
 #common-page {
   h1 {
     text-align: center;
@@ -8,18 +10,16 @@
   }
 
   h2 {
-    border-bottom: 1px solid $gray-border;
-    padding-bottom: .3em;
+    border-bottom: 1px solid variables.$gray-border;
+    padding-bottom: 0.3em;
     margin-bottom: 16px;
     margin-top: 24px;
   }
 
   ul {
     margin-bottom: 16px;
     li {
-      margin-top: .25em;
+      margin-top: 0.25em;
     }
   }
 }
-
-

assets/sass/pages/_contributing.scss

@@ -1,3 +1,5 @@
+@use "../base/variables";
+
 #contributing-page {
   .tabbed-navigation {
     list-style: none;
@@ -15,7 +17,7 @@
         text-decoration: none;
         padding: 0.5em 0.5em;
         font-weight: bold;
-        border-bottom: 0.5em solid $gray-border;
+        border-bottom: 0.5em solid variables.$gray-border;
 
         &.active {
           border-color: #000;
@@ -24,7 +26,7 @@
     }
   }
 
-  ul.issues-list{
+  ul.issues-list {
     li {
       .issue-label {
         border-radius: 2em;