diff options
Diffstat (limited to 'docs/getting-started/custom.html')
| -rw-r--r-- | docs/getting-started/custom.html | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/docs/getting-started/custom.html b/docs/getting-started/custom.html index 41b63bb..8d3cf4d 100644 --- a/docs/getting-started/custom.html +++ b/docs/getting-started/custom.html @@ -243,15 +243,15 @@ <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">@import</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-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">@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>; </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/ @@ -373,12 +373,12 @@ </ul> <pre class="code" data-lang="Sass"><code><!-- filled <span class="hljs-selector-tag">button</span> with the success <span class="hljs-attribute">color</span> --> <span class="hljs-selector-class">.btn-success</span> { - @<span class="hljs-keyword">include</span> button-variant(<span class="hljs-variable">$success-color</span>); + <span class="hljs-keyword">@include</span> button-variant(<span class="hljs-variable">$success-color</span>); } <!-- outlined <span class="hljs-selector-tag">button</span> with the success <span class="hljs-attribute">color</span> --> <span class="hljs-selector-class">.btn-outline-success</span> { - @<span class="hljs-keyword">include</span> button-outline-variant(<span class="hljs-variable">$success-color</span>); + <span class="hljs-keyword">@include</span> button-outline-variant(<span class="hljs-variable">$success-color</span>); } </code></pre> <h4 class="s-subtitle" id="variables-sizes">Variables - Sizes<a class="anchor" href="#variables-sizes" aria-hidden="true">#</a></h4> |