Move to Sass modules

assets/material/css/article.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
    Article
    ========================================================================== */
@@ -54,7 +56,7 @@
     }
 
     a {
-      border-bottom: 1px dotted $blue-accent-color;
+      border-bottom: 1px dotted variables.$blue-accent-color;
       text-decoration: none;
     }
 

assets/material/css/cards.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
    Cards
    ========================================================================== */
@@ -73,7 +75,7 @@ main {
 
   .card-entry-labels-hidden li {
     display: inline-block;
-    background-color: $blue-accent-color;
+    background-color: variables.$blue-accent-color;
     margin: 0 5px;
     padding: 5px 12px;
     border-radius: 3px;
@@ -156,7 +158,7 @@ a.original:not(.waves-effect) {
 .card-tag-labels li {
   margin: 10px 10px 10px auto;
   padding: 5px 12px 5px 16px !important;
-  background-color: $blue-accent-color;
+  background-color: variables.$blue-accent-color;
   border-radius: 3px;
   color: #fff;
   cursor: default;
@@ -247,7 +249,7 @@ a.original:not(.waves-effect) {
     }
 
     .chip {
-      background-color: $blue-accent-color;
+      background-color: variables.$blue-accent-color;
       padding: 0 7px;
       margin: auto 1px;
       border-radius: 6px;

assets/material/css/entries.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
  * Entries
  * ========================================================================== */
@@ -84,7 +86,7 @@
   }
 
   .mass-action-tags-input.mass-action-tags-input.mass-action-tags-input:focus {
-    border-bottom: 3px solid $blue-accent-color;
+    border-bottom: 3px solid variables.$blue-accent-color;
     box-shadow: none;
   }
 }

assets/material/css/index.scss

@@ -1,18 +1,18 @@
-@import "variables";
+@use "variables";
 
 /* Style */
-@import "article";
-@import "cards";
-@import "entries";
-@import "filters";
-@import "layout";
-@import "nav";
-@import "sidenav";
-@import "various";
-@import "dark_theme";
+@use "article";
+@use "cards";
+@use "entries";
+@use "filters";
+@use "layout";
+@use "nav";
+@use "sidenav";
+@use "various";
+@use "dark_theme";
 
 /* Tools */
-@import "fonts";
-@import "icons";
-@import "print";
-@import "media_queries";
+@use "fonts";
+@use "icons";
+@use "print";
+@use "media_queries";

assets/material/css/layout.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
    Layout
    ========================================================================== */
@@ -19,7 +21,7 @@ body {
 }
 
 a {
-  color: $blue-accent-color;
+  color: variables.$blue-accent-color;
 }
 
 main,