fix: migrate scss

Author: jkuebart

src/css/_header.scss

@@ -1,3 +1,5 @@
+@use "base/variables";
+
 .app-header {
   display: grid;
   grid-template-columns: var(--width-aside) 1fr;
@@ -130,6 +132,6 @@
   display: flex;
   align-items: center;
   font-size: 1.5rem;
-  font-family: $ff-mono;
+  font-family: variables.$ff-mono;
   word-break: break-word;
 }

src/css/_result.scss

@@ -1,3 +1,5 @@
+@use "base/variables";
+
 .results__row {
   margin: var(--space-s) 0;
   padding: 0 0 var(--space-s) 0;
@@ -70,7 +72,7 @@
 }
 
 .results__field__value {
-  font-family: $ff-mono;
+  font-family: variables.$ff-mono;
   padding: .5rem;
   max-height: 300px;
   overflow-y: auto;

src/css/main.scss

@@ -1,18 +1,18 @@
-@import 'base/variables';
-@import 'header';
-@import 'nav';
-@import 'param';
-@import 'result';
-@import 'form';
-@import 'form--select';
+@use 'base/variables';
+@use 'header';
+@use 'nav';
+@use 'param';
+@use 'result';
+@use 'form';
+@use 'form--select';
 
 html, body {
   margin: 0;
   padding: 0;
 }
 body {
   font-size: 18px;
-  font-family: $ff-default;
+  font-family: variables.$ff-default;
   color: var(--color-text);
 }
 
@@ -121,7 +121,7 @@ li {
 }
 
 .link__text--machine {
-  font-family: $ff-mono;
+  font-family: variables.$ff-mono;
 }
 
 .link__toggle {
@@ -251,5 +251,5 @@ pre {
   font-weight: 700;
 }
 .title--machine {
-  font-family: $ff-mono;
+  font-family: variables.$ff-mono;
 }