Fix deprecation warnings from Dart Sass 3.0.0

The use of @import is deprecated in favor of @use. The biggest difference is that variables are now scoped. Hence the large number of changes.
FAForever · Feb 24, 2025 · f761225 · f761225
1 parent 1ca42cc
commit f761225
Show file tree

Hide file tree

Showing 17 changed files with 262 additions and 196 deletions.
diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss
@@ -1,5 +1,9 @@
+@use "skins/auto" as skin;
+@use "mixins" as mixins;
+@use "variables" as variables;
+
 html {
-  font-size: $base-font-size;
+  font-size: variables.$base-font-size;
 }
 
 /**
@@ -29,9 +33,9 @@ figure {
  * Basic styling
  */
 body {
-  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
-  color: $text-color;
-  background-color: $background-color;
+  font: variables.$base-font-weight #{variables.$base-font-size}/#{variables.$base-line-height} variables.$base-font-family;
+  color: skin.$text-color;
+  background-color: skin.$background-color;
   -webkit-text-size-adjust: 100%;
   -webkit-font-feature-settings: "kern" 1;
   -moz-font-feature-settings: "kern" 1;
@@ -61,12 +65,12 @@ ol,
 dl,
 figure,
 %vertical-rhythm {
-  margin-bottom: $spacing-unit * 0.5;
+  margin-bottom: variables.$spacing-unit * 0.5;
 }
 
 hr {
-  margin-top: $spacing-unit;
-  margin-bottom: $spacing-unit;
+  margin-top: variables.$spacing-unit;
+  margin-bottom: variables.$spacing-unit;
 }
 
 /**
@@ -93,15 +97,15 @@ figure > img {
 }
 
 figcaption {
-  font-size: $small-font-size;
+  font-size: variables.$small-font-size;
 }
 
 /**
  * Lists
  */
 ul,
 ol {
-  margin-left: $spacing-unit;
+  margin-left: variables.$spacing-unit;
 }
 
 li {
@@ -120,22 +124,22 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: $base-font-weight;
+  font-weight: variables.$base-font-weight;
 }
 
 /**
  * Links
  */
 a {
-  color: $link-base-color;
+  color: skin.$link-base-color;
   text-decoration: none;
 
   &:visited {
-    color: $link-visited-color;
+    color: skin.$link-visited-color;
   }
 
   &:hover {
-    color: $link-hover-color;
+    color: skin.$link-hover-color;
     text-decoration: underline;
   }
 
@@ -152,10 +156,10 @@ a {
  * Blockquotes
  */
 blockquote {
-  color: $brand-color;
-  border-left: 4px solid $border-color-01;
-  padding-left: $spacing-unit * 0.5;
-  @include relative-font-size(1.125);
+  color: skin.$brand-color;
+  border-left: 4px solid skin.$border-color-01;
+  padding-left: variables.$spacing-unit * 0.5;
+  @include mixins.relative-font-size(1.125);
   font-style: italic;
 
   > :last-child {
@@ -173,11 +177,11 @@ blockquote {
  */
 pre,
 code {
-  font-family: $code-font-family;
+  font-family: variables.$code-font-family;
   font-size: 0.9375em;
-  border: 1px solid $border-color-01;
+  border: 1px solid skin.$border-color-01;
   border-radius: 3px;
-  background-color: $code-background-color;
+  background-color: skin.$code-background-color;
 }
 
 code {
@@ -197,11 +201,11 @@ pre {
 
 .highlight {
   border-radius: 3px;
-  background: $code-background-color;
+  background: skin.$code-background-color;
   @extend %vertical-rhythm;
 
   .highlighter-rouge & {
-    background: $code-background-color;
+    background: skin.$code-background-color;
   }
 }
 
@@ -230,29 +234,29 @@ pre {
  * Tables
  */
 table {
-  margin-bottom: $spacing-unit;
+  margin-bottom: variables.$spacing-unit;
   width: 100%;
-  text-align: $table-text-align;
-  color: $table-text-color;
+  text-align: variables.$table-text-align;
+  color: skin.$table-text-color;
   border-collapse: collapse;
-  border: 1px solid $table-border-color;
+  border: 1px solid skin.$table-border-color;
   tr {
     &:nth-child(even) {
-      background-color: $table-zebra-color;
+      background-color: skin.$table-zebra-color;
     }
   }
   th,
   td {
-    padding: $spacing-unit * 33.3333333333;
+    padding: variables.$spacing-unit * 33.3333333333;
   }
   th {
-    background-color: $table-header-bg-color;
-    border: 1px solid $table-header-border;
+    background-color: skin.$table-header-bg-color;
+    border: 1px solid skin.$table-header-border;
   }
   td {
-    border: 1px solid $table-border-color;
+    border: 1px solid skin.$table-border-color;
   }
-  @include media-query($on-laptop) {
+  @include mixins.media-query(variables.$on-laptop) {
     display: block;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;

diff --git a/src/_sass/_footer.scss b/src/_sass/_footer.scss
@@ -1,9 +1,13 @@
+@use "skins/auto" as skin;
+@use "mixins" as mixins;
+@use "variables" as variables;
+
 /**
  * Site footer
  */
 .site-footer {
-  border-top: 1px solid $border-color-01;
-  padding: $spacing-unit 0;
+  border-top: 1px solid skin.$border-color-01;
+  padding: variables.$spacing-unit 0;
 }
 
 .footer-navigation {

diff --git a/src/_sass/_header.scss b/src/_sass/_header.scss
@@ -1,3 +1,7 @@
+@use "skins/auto" as skin;
+@use "mixins" as mixins;
+@use "variables" as variables;
+
 /**
  * Site header
  */
@@ -14,18 +18,18 @@
 }
 
 .site-header-title {
-  @include relative-font-size(1.625);
+  @include mixins.relative-font-size(1.625);
   font-weight: 300;
   margin-bottom: 0;
   float: left;
 
-  @include media-query($on-palm) {
+  @include mixins.media-query(variables.$on-palm) {
     padding-right: 45px;
   }
 
   &,
   &:visited {
-    color: $site-title-color;
+    color: skin.$site-title-color;
   }
 }
 
@@ -35,13 +39,13 @@
 }
 
 .site-header-github-link {
-  @include relative-font-size(1.625);
+  @include mixins.relative-font-size(1.625);
 }
 
 .site-header-github-meta {
   display: none;
 
-  @media screen and (min-width: $on-medium) {
+  @media screen and (min-width: variables.$on-medium) {
     display: flex;
 
     flex-direction: column;
@@ -52,5 +56,5 @@
 }
 
 .site-header-github-meta-field {
-  @include relative-font-size(0.8);
+  @include mixins.relative-font-size(0.8);
 }
diff --git a/src/_sass/_layout.scss b/src/_sass/_layout.scss
@@ -1,3 +1,7 @@
+@use "skins/auto" as skin;
+@use "mixins" as mixins;
+@use "variables" as variables;
+
 /**
  * Page content
  */
@@ -6,87 +10,86 @@
 }
 
 .page-heading {
-  @include relative-font-size(2);
+  @include mixins.relative-font-size(2);
 }
 
 .post-list-heading {
-  @include relative-font-size(1.75);
+  @include mixins.relative-font-size(1.75);
 }
 
 .post-meta {
-  font-size: $small-font-size;
-  color: $brand-color;
+  font-size: variables.$small-font-size;
+  color: skin.$brand-color;
 }
 
 .post-link {
   display: block;
-  @include relative-font-size(1.5);
+  @include mixins.relative-font-size(1.5);
 }
 
 /**
  * Posts
  */
 .post-header {
-  margin-bottom: $spacing-unit;
+  margin-bottom: variables.$spacing-unit;
 }
 
 .post-title,
 .post-content h1 {
-  @include relative-font-size(2.625);
+  @include mixins.relative-font-size(2.625);
   letter-spacing: -1px;
   line-height: 1.15;
 
-  @media screen and (min-width: $on-large) {
-    @include relative-font-size(2.625);
+  @media screen and (min-width: variables.$on-large) {
+    @include mixins.relative-font-size(2.625);
   }
 }
 
 .post-content {
-  margin-bottom: $spacing-unit;
+  margin-bottom: variables.$spacing-unit;
 
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    margin-top: $spacing-unit;
+    margin-top: variables.$spacing-unit;
   }
 
   h2 {
-    @include relative-font-size(1.75);
+    @include mixins.relative-font-size(1.75);
 
-    @media screen and (min-width: $on-large) {
-      @include relative-font-size(2);
+    @media screen and (min-width: variables.$on-large) {
+      @include mixins.relative-font-size(2);
     }
   }
 
   h3 {
-    @include relative-font-size(1.375);
+    @include mixins.relative-font-size(1.375);
 
-    @media screen and (min-width: $on-large) {
-      @include relative-font-size(1.625);
+    @media screen and (min-width: variables.$on-large) {
+      @include mixins.relative-font-size(1.625);
     }
   }
 
   h4 {
-    @include relative-font-size(1.25);
+    @include mixins.relative-font-size(1.25);
   }
 
   h5 {
-    @include relative-font-size(1.125);
+    @include mixins.relative-font-size(1.125);
   }
   h6 {
-    @include relative-font-size(1.0625);
+    @include mixins.relative-font-size(1.0625);
   }
 }
 
 /**
  * Pagination navbar
  */
 .pagination {
-  margin-bottom: $spacing-unit;
-  @extend .social-media-list;
+  margin-bottom: variables.$spacing-unit;
   li {
     a,
     div {
@@ -96,11 +99,11 @@
     }
     div {
       display: block;
-      padding: $spacing-unit * 0.25;
+      padding: variables.$spacing-unit * 0.25;
       border: 1px solid transparent;
 
       &.pager-edge {
-        color: $border-color-01;
+        color: skin.$border-color-01;
         border: 1px dashed;
       }
     }
@@ -110,9 +113,9 @@
 /**
  * Grid helpers
  */
-@media screen and (min-width: $on-large) {
+@media screen and (min-width: variables.$on-large) {
   .one-half {
-    width: calc(50% - (#{$spacing-unit} / 2));
+    width: calc(50% - (#{variables.$spacing-unit} / 2));
   }
 }
 
@@ -126,7 +129,7 @@
   grid-template-rows: 1fr min-content;
   grid-template-columns: 1fr;
 
-  @media (min-width: $on-medium) {
+  @media (min-width: variables.$on-medium) {
     grid-template-rows: 1fr;
     grid-template-columns: 1fr 400px;
   }