The generators are special (a naming convention in Spruce CSS only) mixins, which we use to generate base styles.
By default Spruce CSS doesn’t generate styles; importing it, you access the variables, mixins, and functions but nothing more. If you wish to use the styling, you have to include them explicitly.
The goal is to separate other Spruce CSS functionality from the style generation and modularity. There can be cases where you don’t need all or any of the given CSS code.
- A generator mixin is always prefixed with
generator-*. - A generator mixin gives back complete declarations with selectors (you may parameter the selectors). It is a wrapper to call style declarations.
- A generator mixin is usually used once per project. Including any of them more than once may generate unnecessary repetition and bloat.
Using generate-color-variables, we can generate our CSS variables from a map object everywhere we want. You can find an example in the core.
| Name | Default Value | Description |
|---|---|---|
$colors | $colors | The color Sass map. |
$selector | :root | The selector which will scope the CSS custom properties. |
@use 'sprucecss/scss/spruce' as *;
@include generate-color-variables(
$colors,
':root'
);
A useful internal utility mixin to generate CSS custom properties anywhere. We use this in custom property mode to generate the scoped variables where needed.
If you want to see it in action check out the check form component.
| Name | Default Value | Description |
|---|---|---|
$map | The name Sass map. | |
$exclude | null | A Sass list what to exclude from the map. |
$include | null | A Sass list what to include from the map. |
The generate-styles is a shorthand to call all the mixins from below the list. You can control the output by the $generators map.
@use 'sprucecss/scss/spruce' as *;
@include generate-style;- generate-normalize
- generate-root
- generate-accessibility
- generate-default
- generate-divider
- generate-media
- generate-table
- generate-typography
- generate-utilities
- generate-print
- generate-btn
- generate-file-btn
- generate-form-check
- generate-form-control
- generate-form-description
- generate-fieldset
- generate-form-group
- generate-form-label
- generate-form-row
- generate-field-feedback
