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

.
└── scss/
    ├── config/
    │   ├── _index.scss
    │   ├── _config.scss
    │   └── _styles.scss
    └── main.scss

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

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