picturepan2 · mlbiche · Feb 23, 2021 · Feb 24, 2021 · Feb 24, 2021 · Feb 24, 2021
diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
diff --git a/dist/spectre-icons.css b/dist/spectre-icons.css
diff --git a/dist/spectre-icons.min.css b/dist/spectre-icons.min.css
diff --git a/dist/spectre.css b/dist/spectre.css
diff --git a/dist/spectre.min.css b/dist/spectre.min.css
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css
diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css
diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css
diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/getting-started/custom.html b/docs/getting-started/custom.html
@@ -243,15 +243,13 @@ <h4 class="s-subtitle" id="importing">Importing Sass<a class="anchor" href="#imp
 <span class="hljs-variable">$dark-color</span>: <span class="hljs-number">#3e396b</span>;
 
 <span class="hljs-comment">// Import full Spectre source code</span>
-<span class="hljs-keyword">@import</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>;
+<span class="hljs-keyword">@use</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>;
 </code></pre>
             <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>.</p>
             <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span>
-<span class="hljs-keyword">@import</span> <span class="hljs-string">"variables"</span>;
-
 <span class="hljs-comment">// Import only the needed components</span>
-<span class="hljs-keyword">@import</span> <span class="hljs-string">"node_modules/spectre.css/src/buttons"</span>;
-<span class="hljs-keyword">@import</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>;
+<span class="hljs-keyword">@use</span> <span class="hljs-string">"node_modules/spectre.css/src/buttons"</span>;
+<span class="hljs-keyword">@use</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>;
 </code></pre>
             <h4 class="s-subtitle" id="folders">Folder structure<a class="anchor" href="#folders" aria-hidden="true">#</a></h4>
             <pre class="code"><code>spectre/

diff --git a/docs/src/getting-started/custom.pug b/docs/src/getting-started/custom.pug
@@ -86,7 +86,7 @@ block docs-content
           $dark-color: #3e396b;
 
           // Import full Spectre source code
-          @import "node_modules/spectre.css/src/spectre";
+          @use "node_modules/spectre.css/src/spectre";
 
     p
       | Alternatively, you can create custom 
@@ -100,11 +100,9 @@ block docs-content
       code
         :highlight(lang="scss")
           // Example of project-name.scss
-          @import "variables";
-
           // Import only the needed components
-          @import "node_modules/spectre.css/src/buttons";
-          @import "node_modules/spectre.css/src/forms";
+          @use "node_modules/spectre.css/src/buttons";
+          @use "node_modules/spectre.css/src/forms";
 
     +docs-subheading('folders', 'Folder structure')