Upgade Sass compiler.

- Replace @import with @use.
- Reorder some declarations.
- Use its module system to load variables from the `_colors` file.

Author: ayosec

flake.lock

@@ -106,15 +106,15 @@ main.item section {
   }
 
   dl {
+    border-width: 1px 1px 0 1px;
+    border-style: solid;
+    border-color: var(--item-table-border);
+
     @media screen and (min-width: 15cm) {
       display: grid;
       grid-template-columns: min-content 1fr;
     }
 
-    border-width: 1px 1px 0 1px;
-    border-style: solid;
-    border-color: var(--item-table-border);
-
     dt {
       font-family: monospace;
       color: var(--item-table-term-fg);

lib/ffdocs/view/styles/_items.scss

@@ -1,3 +1,5 @@
+@use "colors";
+
 * {
   box-sizing: border-box;
 }
@@ -148,12 +150,13 @@ nav {
 
   details {
     summary {
+
       display: block;  // Remove icon.
       cursor: pointer;
       outline: 0;
 
       padding: 0.5rem 0.5rem 0.5rem 1rem;
-      border-bottom: 1px solid $nav-summary-border-color;
+      border-bottom: 1px solid colors.$nav-summary-border-color;
 
       &::after {
         content: " ";

lib/ffdocs/view/styles/_layout.scss

@@ -1,16 +1,19 @@
+@use "sass:color";
+@use "colors";
+
 :root {
   --list-header: #555;
   --list-items-sep: #ccc;
 
-  --list-selected-bg: #{lighten($main-green, 40%)}
+  --list-selected-bg: #{color.adjust(colors.$main-green, $lightness: 40%)}
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --list-header: #ccc;
     --list-items-sep: #777;
 
-    --list-selected-bg: #{darken($main-green, 25%)}
+    --list-selected-bg: #{color.adjust(colors.$main-green, $lightness: -25%)}
   }
 }
 

lib/ffdocs/view/styles/_list.scss

@@ -1,3 +1,5 @@
+@use "colors";
+
 :root {
   --versionfront-header: #333;
   --versionfront-lists-link: $link-color;

lib/ffdocs/view/styles/_version_front.scss

@@ -1,11 +1,11 @@
-@import "colors";
-@import "items";
-@import "layout";
-@import "list";
-@import "search";
-@import "version_changelog";
-@import "version_front";
-@import "version_matrix";
+@use "colors";
+@use "items";
+@use "layout";
+@use "list";
+@use "search";
+@use "version_changelog";
+@use "version_front";
+@use "version_matrix";
 
 :root {
   --base-font-size: 12pt;

lib/ffdocs/view/styles/main.scss

@@ -187,6 +187,9 @@ def render(executor)
 
       @main_css_path = @output.join(File.basename(CSS_SOURCE, ".scss") + ".css")
       @main_css_path.write(result.css)
+    rescue Sass::CompileError => e
+      STDERR.print e.full_message(highlight: true)
+      exit 1
     end
 
     # Combine the JS files.