Spruce CSS is built on Sass; to get its full potential, you should use with it. If you want, you can load the compiled CSS too, but you will lose many features.
Install with NPM
terminalnpm install sprucecss --save
Install with Yarn
terminalyarn add sprucecss
Install Manually
Download the latest release, find the dist folder at the root (the compiled files), and use the preferred CSS file (minified, regular).
html<link href="spruce.min.css" rel="stylesheet"><link href="spruce.css" rel="stylesheet">
Using Spruce CSS with Sass
The manageability of Spruce CSS comes from its Sass features, variables, mixins, and functions. You should use the preprocessor for the proper workflow (e.g., overwriting the default variables).
With the help of the mixins and functions, you can write code easier.
Import It With @use
To import it into your project, you must use Sass’s @use
, a newer type of @import
similar to the JavaScript modules. Unlike using @import
, you must import (use it) it in every file where you want to use Spruce, its variables, functions, or mixins.
scss@use 'sprucecss/scss/spruce' as *;
Namespacing
The @use
rule loads the mixins, functions, and variables without a namespace, so you can simply refer to anything by its name:
scss.section { @include layout-stack('m');}
We include the layout-stack
mixin that will make a simple stacked layout.
If you prefer the namespaces, leave the as *
part out and use the following:
scss@use 'sprucecss/scss/spruce';
.section { @include spruce.layout-stack('m');}
Based on your compile configuration you may need the tilde ~
character (at start of the @use statement). This is a shorthand to the node_modules
folder in a Webpack configuration, so you don’t have to use a relative path.
Load Styles
Importing Spruce means you load its variables, functions, and mixins. To use its styles, you must include them explicitly with a mixin.
To load the styles, you need to include a generator mixin. A generator (a naming convention in Spruce CSS only) mixin is a wrapper mixin whose goal is to generate a specified style, usually once in your project. These are complete declarations with selectors, so you can’t use them inside code blocks.
You can control the flow of the style generation in a lot of ways (for more information, please visit our Generators page), but there is one main mixin to use:
scss@use 'sprucecss/scss/spruce' as *;
@include generate-styles;
Compiling Sass
Depending on your development setup, using Sass could be a burden. We think that Sass is a handy tool and easy to use. Compiling is one of the more significant barriers; for this reason, we wrote an article about a simple Sass compile setup.
Also, we made a Spruce CSS Eleventy Starter, a boilerplate starter template based on the popular static site generator 11ty. It includes a basic compile setup and, of course, Spruce CSS. You can find more information about it on GitHub.