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 folder.

└── 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';


Inside the** _config.scss** file, we set our Spruce CSS customizations as you see under the settings and variables.

@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 configure the generated content you can do it through the $generators map where you can opt-out from each section separately.

@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';

The Advantages of This Structure

  • 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).