We try to make Spruce CSS smaller but still, we talk about 1000+ lines of code. Sometimes we don’t need all of them.

This framework only writes out any code if we tell it explicitly through a mixin. We call these mixins generators. We can control the size of our codebase by using or omitting them.

Usually, we use generate-styles:

scss
@use 'sprucecss/scss/spruce' as *;
@include generate-styles;

and we configure what to generate through the $generators map.

You can see that from the source code that these mixin contains a lot of condition based on the previously mentioned map.

scss
@use 'sprucecss/scss/spruce' with (
$generators: (
'form': (
'btn': false,
),
),
);

Using this setting we turn off the button style generation.

Please visit our first how-to article to learn more about how you should set up your config files.