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 it 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
generate-*. - A generator mixin gives back complete rules with selectors (some of them accept the selectors as arguments). 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 it in custom property mode to generate the scoped variables where needed. With the $hook argument (new in v3), every value reads a namespaced style hook first.
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. |
$hook | null | The name of the style hook namespace (like 'btn'). |
The generate-styles mixin is a shorthand to call all the mixins from the list below. You can control the output with the $generators map.
@use 'sprucecss/scss/spruce' as *;
@include generate-styles;Turn any part off (or the opt-in parts on) with the $generators map:
@use 'sprucecss/scss/spruce' with (
$generators: (
'content': (
'dark-mode': true, // opt-in
'dialog': false,
'styles': true, // opt-in
),
'form': (
'btn-group': false,
'form-range': false,
),
),
);| Group | Key | Default | Generates |
|---|---|---|---|
content | accessibility | true | .sr-only, .sr-only-focusable |
content | dark-mode | false | The dark mode |
content | default | true | Base element styles (selection, links, box sizing) |
content | details | true | details |
content | dialog | true | dialog |
content | display | true | The $display and shadow custom properties |
content | divider | true | hr |
content | layout | true | The $layout custom properties |
content | media | true | Images, video, iframes, figures |
content | normalize | true | normalize.css |
content | print | true | Print styles (also needs the print setting) |
content | progress | true | progress and meter |
content | root | true | The :root custom properties |
content | styles | false | The style presets |
content | table | true | Tables |
content | typography | true | Typography |
content | utilities | true | Utilities |
form | btn | true | Buttons and their variants |
form | btn-group | true | .btn-group |
form | file-btn … form-switch | true | The form elements |
- generate-normalize
- generate-root
- generate-accessibility
- generate-default
- generate-divider
- generate-media
- generate-table
- generate-typography
- generate-utilities
- generate-print
- generate-details (new)
- generate-dialog (new)
- generate-progress (new)
- generate-btn
- generate-btn-group (new)
- generate-file-btn
- generate-form-check
- generate-form-control
- generate-form-description
- generate-form-fieldset
- generate-form-group-label
- generate-form-group
- generate-form-label
- generate-form-row
- generate-form-feedback
- generate-form-range
- generate-form-switch
- generate-dark-mode (new)
- generate-style-presets (new)
New in v3. Regenerate the SVG field icons (select arrow, checkbox, radio, switch knob, validation icons) for a color map under a selector. The icons are data URIs, so they can’t follow CSS custom properties; use this mixin when you change the related colors for a theme. The dark mode and the styles call it for you.
| Name | Default Value | Description |
|---|---|---|
$colors | The color map (only the defined keys are used). | |
$scope | The scope selector. | |
$control | '.form-control' | The form control selector. |
$check | '.form-check__control' | The checkbox and radio selector. |
$switch | '.form-switch__control' | The switch selector. |
$suffix | '' | A suffix for every control selector. |
@include generate-field-icons($high-contrast-colors, '[data-theme-mode="high-contrast"]');New in v3. Generate one style preset under any scope. generate-style-presets calls it for every preset based on the styles settings.
@include generate-style('brutalist', map.get($styles, 'brutalist'), '.promo');
