replace deprecated Sass @import rules with @use

.gitignore

@@ -7,3 +7,5 @@ Gemfile.lock
 *.backup
 *.kate-swp
 *.pdf
+log/
+tmp/

_sass/jekyll-theme-minimalist.scss

@@ -1,6 +1,6 @@
-@import "fonts";
-@import "rouge-github";
-@import "colors";
+@use "fonts";
+@use "rouge-github";
+@use "colors";
 
 // default variables
 $section-width: 75% !default;

_sass/minimalist.scss

@@ -1,4 +1 @@
-// Placeholder file. If your site uses
-//     @import "{{ site.theme }}";
-// Then using this theme with jekyll-remote-theme will work fine.
-@import "jekyll-theme-minimalist";
+@use "jekyll-theme-minimalist";

assets/css/colors-auto-default-dark.scss

@@ -3,15 +3,15 @@
 
 //this mode is like colors-auto but if the device does not support @media prefers-color-scheme it will deafault to dark mode
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-    @include colors;
-    @include dark-colors;
+    @include c.colors;
+    @include c.dark-colors;
   }
 
 @media print, (prefers-color-scheme: light) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
   :root {
-    @include light-colors;
+    @include c.light-colors;
   }
 }

assets/css/colors-auto.scss

@@ -1,15 +1,15 @@
 ---
 ---
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-    @include colors;
-    @include light-colors;
+    @include c.colors;
+    @include c.light-colors;
   }
 
 @media screen and (prefers-color-scheme: dark) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
   :root{
-    @include dark-colors;
+    @include c.dark-colors;
   }
 }

assets/css/colors-dark.scss

@@ -1,15 +1,15 @@
 ---
 ---
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-  @include colors;
-  @include dark-colors;
+  @include c.colors;
+  @include c.dark-colors;
 }
 
 @media print {
   :root {
-    @include light-colors;
+    @include c.light-colors;
   }
 }

assets/css/colors-light.scss

@@ -1,9 +1,9 @@
 ---
 ---
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-  @include colors;
-  @include light-colors;
+  @include c.colors;
+  @include c.light-colors;
 }

assets/css/style-article.scss

@@ -4,7 +4,7 @@
 $section-width: 100%;
 $section-float: middle;
 
-@import "jekyll-theme-minimalist";
+@use "jekyll-theme-minimalist";
 
 .img-circle {
     -webkit-border-radius: 8px;

assets/css/style.scss

@@ -1,7 +1,7 @@
 ---
 ---
 
-@import "jekyll-theme-minimalist";
+@use "jekyll-theme-minimalist";
 
 .img-circle {
     -webkit-border-radius: 8px;