Configure Your Project

A small, predictable folder structure keeps every Spruce CSS setting in one place and makes it easy to add a dark mode, a style or new components later.

Sass allows configuring a module only once, at its first @use. This structure makes sure the configuration always loads first.

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

Your settings, variables and colors. See the settings, variables and colors pages for every option.

@use 'sprucecss/scss/spruce' with (
  $colors: (
    'base': (
      'primary': hsl(221deg 83% 53%),
    ),
    'card': (
      'background': hsl(0deg 0% 100%),
    ),
  ),
  $generators: (
    'content': (
      'dark-mode': true,
    ),
  ),
  $settings: (
    'css-custom-properties': true,
  ),
);

The generators: usually only generate-styles.

@use 'sprucecss/scss/spruce' as *;

@include generate-styles;

Forward the config files, in order:

@forward 'config';
@forward 'styles';

Every other file just uses Spruce, without configuration:

@use 'sprucecss/scss/spruce' as *;

.card {
  background-color: color('background', 'card');
  border-radius: radius('lg');
  padding: spacer-clamp('m', 'l');
}

The entry point loads the config first, then your components:

@forward 'config';
@forward 'component';

• Every configuration lives in one folder.
• It is easy to extend: add _dark-colors.scss for a dark theme or _fonts.scss for the @font-face rules.
• Any other entry file (like an editor stylesheet) can load the same config with @use 'config/config';.