How to Configure Spruce CSS in Your Project
Including Spruce CSS in your project is an easy job. First, you must install it (the best with npm) and set up the Sass compile. Second, you need a quick config setting and are good to go.
A config setting is needed to set your custom values and generate Spruce’s styles.
We can utilize Sass’s newer index file feature.
Create a config folder inside your scss folder. We need an _index.scss, a _config.scss, and a _styles.scss file in this folder. Inside the _index.scss file, we forward the others to our main entry point (that we compile into a single CSS file) main.scss, which is in the root of the
.└── scss/├── config/│ ├── _index.scss│ ├── _config.scss│ └── _styles.scss└── main.scss
You can see this file structure in action at our Spruce CSS Starter Kit.
In this file, we just forward all of the config files.
@forward 'config';@forward 'styles';
@use 'sprucecss/scss/spruce' with ($colors: ('card': ('background': hsl(0deg 0% 100%),'border': hsl(220deg 32% 87%),),),);
Inside the _styles.scss file, we set the generators. Usually, this means the
generate-styles, but we can do it any way we want using the separate functions.
If you want to configurate the generated content you can do it through the
$generators map where you can opt-out from each section separatly.
@use 'sprucecss/scss/spruce' as *;@include generate-styles;
For the complete picture, we include the main file here, where the first step is loading the config.
@forward 'config';// @forward 'components';
- You separated every config-related code inside one folder, which is always nice.
- You can easily extend this structure in the future if you need another theme, like a dark one.
- You can load the config in multiple files, which are usually handy (or just the _config.scss).