refactor: convert Sass @import to @use/@forward module system

Mearman · Mearman · commit c212a0f70736 · 2026-05-22T10:59:24.000+01:00
Migrate all Sass files from the deprecated @import rule to the modern @use/@forward module system: - @import -> @use with namespace or 'as *' for convenience - Create clay/_index.scss to re-export vars and mixins - _clay.scss forwards from the clay/ directory index - config-page.scss uses @use for each module Fix remaining Dart Sass deprecation warnings: - Slash division (/) -> math.div() or calc() - Global builtin ceil() -> sass:math.ceil() - Add @use 'sass:math' where needed
diff --git a/src/styles/_clay.scss b/src/styles/_clay.scss
@@ -1,2 +1 @@
-@import "clay/vars";
-@import "clay/mixins";
+@forward 'clay';
diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss
@@ -1,4 +1,5 @@
-@import "clay";
+@use 'vars' as *;
+@use 'mixins' as *;
 
 html, body {
   @include font-pfdin(regular);
@@ -92,7 +93,7 @@ label {
     display: inline-block;
     color: $color-white;
     background: $color-orange;
-    border-radius: $size / 2;
+    border-radius: calc($size / 2);
     width: $size;
     text-align: center;
     height: $size;
@@ -152,8 +153,8 @@ label {
       display: block;
       position: absolute;
       top: 0;
-      left: $item-spacing-h / 2;
-      right: $item-spacing-h / 2;
+      left: calc($item-spacing-h / 2);
+      right: calc($item-spacing-h / 2);
       height: 1px;
       pointer-events: none;
     }
diff --git a/src/styles/clay/_index.scss b/src/styles/clay/_index.scss
@@ -0,0 +1,2 @@
+@forward 'vars';
+@forward 'mixins';
diff --git a/src/styles/clay/_mixins.scss b/src/styles/clay/_mixins.scss
@@ -1,4 +1,5 @@
-@import "vars";
+@use 'sass:math';
+@use 'vars' as *;
 
 @mixin font-pfdin($weight: normal) {
 
@@ -29,9 +30,9 @@
 }
 
 @mixin font-size($size: 1) {
-  $font-size:  $size * 1rem;
-  font-size:$font-size;
-  line-height: $base-line-height * ceil($font-size / $base-line-height);
+  $font-size: $size * 1rem;
+  font-size: $font-size;
+  line-height: $base-line-height * math.ceil(math.div($font-size, $base-line-height));
 }
 
 @mixin tap-highlight($color: rgba(255, 255, 255, 0.1)) {
diff --git a/src/styles/clay/_vars.scss b/src/styles/clay/_vars.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 // Base settings
 $em-base: 17px;
 
-// custom vars
+// Custom vars
 $base-line-height: 1.4;
 $base-height: $base-line-height * $em-base;
 $border-radius: 0.25rem;
-$item-spacing-v: $base-height / 2;
+$item-spacing-v: math.div($base-height, 2);
 $item-spacing-h: 0.75rem;
 $golden: 1.618;
 $small-component-width: $base-height * $golden;
diff --git a/src/styles/clay/components/button.scss b/src/styles/clay/components/button.scss
@@ -1,3 +1,5 @@
+@use '../' as *;
+
 .component-button {
   text-align: center;
 
diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss
@@ -1,24 +1,25 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-checkbox {
 
   display: block;
 
   .section & {
-    padding-right: $item-spacing-h / 2;
+    padding-right: math.div($item-spacing-h, 2);
   }
 
   > .label {
     display: block;
-    padding-bottom: $item-spacing-v / 2;
+    padding-bottom: math.div($item-spacing-v, 2);
   }
 
   .checkbox-group {
 
-    padding-bottom: $item-spacing-v / 2;
+    padding-bottom: math.div($item-spacing-v, 2);
 
     label {
-      padding: $item-spacing-v / 2 $item-spacing-h / 2;
+      padding: math.div($item-spacing-v, 2) math.div($item-spacing-h, 2);
     }
 
     .label {
diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss
@@ -1,4 +1,5 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-color {
 
@@ -9,7 +10,7 @@
   .value {
     width: $small-component-width;
     height: $base-height;
-    border-radius: $base-height / 2;
+    border-radius: math.div($base-height, 2);
     box-shadow: $box-shadow-small-components;
     display: block;
     background: #000;
@@ -21,7 +22,7 @@
     right: 0;
     bottom: 0;
     position: fixed;
-    padding: $item-spacing-v $item-spacing-h /2;
+    padding: $item-spacing-v math.div($item-spacing-h, 2);
     background: rgba(0, 0, 0, 0.65);
     opacity: 0;
     transition: opacity 100ms ease-in 175ms;
diff --git a/src/styles/clay/components/input.scss b/src/styles/clay/components/input.scss
@@ -1,4 +1,5 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-input {
 
@@ -26,7 +27,7 @@
     width: 100%;
     background: $color-gray-2;
     border-radius: $border-radius;
-    padding: $item-spacing-v / 2 $item-spacing-h / 2;
+    padding: math.div($item-spacing-v, 2) math.div($item-spacing-h, 2);
     border: none;
     vertical-align: baseline;
     color: $color-white;
diff --git a/src/styles/clay/components/radiogroup.scss b/src/styles/clay/components/radiogroup.scss
@@ -1,24 +1,25 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-radio {
 
   display: block;
 
   .section & {
-    padding-right: $item-spacing-h / 2;
+    padding-right: math.div($item-spacing-h, 2);
   }
 
   > .label {
     display: block;
-    padding-bottom: $item-spacing-v / 2;
+    padding-bottom: math.div($item-spacing-v, 2);
   }
 
   .radio-group {
 
-    padding-bottom: $item-spacing-v / 2;
+    padding-bottom: math.div($item-spacing-v, 2);
 
     label {
-      padding: $item-spacing-v / 2 $item-spacing-h / 2;
+      padding: math.div($item-spacing-v, 2) math.div($item-spacing-h, 2);
     }
 
     .label {
diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss
@@ -1,4 +1,5 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-select {
 
@@ -24,8 +25,8 @@
       margin-top: -0.1rem;
       width: 0;
       height: 0;
-      border-left: $triangle-size / 2 solid transparent;
-      border-right: $triangle-size / 2 solid transparent;
+      border-left: math.div($triangle-size, 2) solid transparent;
+      border-right: math.div($triangle-size, 2) solid transparent;
       border-top: $triangle-size solid $color-orange;
     }
   }
diff --git a/src/styles/clay/components/slider.scss b/src/styles/clay/components/slider.scss
@@ -1,4 +1,5 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-slider {
 
@@ -34,7 +35,7 @@
     display: block;
     background: $color-gray-2;
     border-radius: $border-radius;
-    padding: $item-spacing-v / 2 $item-spacing-h / 2;
+    padding: math.div($item-spacing-v, 2) math.div($item-spacing-h, 2);
     border: none;
     vertical-align: baseline;
     color: $color-white;
@@ -80,7 +81,7 @@
       height: $track-height;
       background: $color-gray-6;
       width: 100%;
-      top: $base-height / 2 - $track-height / 2;
+      top: math.div($base-height, 2) - math.div($track-height, 2);
     }
 
     .slider {
@@ -115,7 +116,7 @@
           content: "";
           position: absolute;
           left: -1000px;
-          top: $base-height / 2 - $track-height / 2;
+          top: math.div($base-height, 2) - math.div($track-height, 2);
           height: $track-height;
           width: 1001px;
           background: $color-orange;
diff --git a/src/styles/clay/components/toggle.scss b/src/styles/clay/components/toggle.scss
@@ -1,4 +1,5 @@
-@import "clay";
+@use 'sass:math';
+@use '../' as *;
 
 .component-toggle {
 
@@ -35,7 +36,7 @@
       position: absolute;
       left: 0;
       display: block;
-      top: ($marker-diameter - $slide-height) / 2 * -1;
+      top: math.div($marker-diameter - $slide-height, 2) * -1;
       transition: transform 150ms linear;
       box-shadow: $box-shadow-small-components;
     }
diff --git a/src/styles/clay/elements/_button.scss b/src/styles/clay/elements/_button.scss
@@ -1,4 +1,4 @@
-@import "clay";
+@use '../' as *;
 
 button,
 .button {
diff --git a/src/styles/config-page.scss b/src/styles/config-page.scss
@@ -1,4 +1,4 @@
-@import "clay/fonts";
-@import "clay/reset";
-@import "clay/base";
-@import "clay/elements/button";
+@use 'clay/fonts';
+@use 'clay/reset';
+@use 'clay/base';
+@use 'clay/elements/button';

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-@import "clay/vars";`
`2`		`-@import "clay/mixins";`
	`1`	`+@forward 'clay';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@forward 'vars';`
	`2`	`+@forward 'mixins';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../' as *;`
	`2`	`+`
`1`	`3`	`.component-button {`
`2`	`4`	`text-align: center;`
`3`	`5`