Replace deprecated @import at-rule with @use at-rule

Author: jackdomleo7

css/checka11y.min.css

@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .button {
   background-color: $orange;
   color: #fff;

scss/_button.scss

@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .code {
   background-color: fade-out(#fafafa, 0.5);
   color: $orange;

scss/_code.scss

@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .footer {
   align-items: center;
   display: flex;

scss/_footer.scss

@@ -1,5 +1,4 @@
-$blue: #1e80ff;
-$orange: #ff5100;
+@use "./variables" as *;
 
 ::selection {
   background-color: mix($blue, #fff, 80%);

scss/_global.scss

@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .header {
   align-items: center;
   display: flex;

scss/_header.scss

@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .link {
   color: $blue;
   font-weight: 700;

scss/_link.scss

@@ -0,0 +1,2 @@
+$blue: #1e80ff;
+$orange: #ff5100;

scss/_variables.scss

@@ -1 +1 @@
-@import "../node_modules/checka11y-css/src/checka11y";
+@use "../node_modules/checka11y-css/src/checka11y" as *;

scss/checka11y.scss

@@ -1,13 +1,13 @@
-@import "../node_modules/normalize.css/normalize";
-@import "./global";
-@import "./button";
-@import "./header";
-@import "./footer";
-@import "./link";
-@import "./buy-me-a-coffee";
-@import "./helpers";
-@import "./sections";
-@import "./code";
+@use "../node_modules/normalize.css/normalize" as *;
+@use "./global" as *;
+@use "./button" as *;
+@use "./header" as *;
+@use "./footer" as *;
+@use "./link" as *;
+@use "./buy-me-a-coffee" as *;
+@use "./helpers" as *;
+@use "./sections" as *;
+@use "./code" as *;
 
 .main {
   display: flex;