In Spruce CSS, the settings are global options controlled through a Sass map.
You can access any setting with the setting() helper function. Below, you can see the $settings
object with its default values.
scss$settings: ( color-fallback: false, hyphens: true, optimal-responsive-font-size: '2vw + 1rem', prefix: 'spruce', utilities: false);
color-fallback
Setting the color-fallback
key to true, you can turn the color fallback when using spruce.color()
function.
scss// Without fallbackbody { // color: spruce.color(text); color: var(--spruce-base-color-text);}
// With fallbackbody { // color: spruce.color(text); color: var(--spruce-base-color-text, #474d52);}
Turn on the color fallback:
scss@use '~sprucecss/scss/spruce' with ( $settings: ( color-fallback: true ));
hyphens
By default Spruce uses a simple hyphenation setup which you can find here.
Turn off the hyphenation:
scss@use '~sprucecss/scss/spruce' with ( $settings: ( hyphens: false ));
optimal-responsive-font-size
Optimal size used at font-size()
and responsive-font-size()
function which is used in a clamp()
function as the middle value.
Using the mentioned functions, you can modify this value per call too. A global fallback is a much-needed thing here, but we need to fine-tune it uniquely in some cases (like bigger sizes).
Modify the optimal font-size value:
scss@use '~sprucecss/scss/spruce' with ( $settings: ( optimal-responsive-font-size: '5vw + 1' ));
References
prefix
Spruce CSS uses this prefix for generating the custom properties.
Modify the prefix value:
scss@use '~sprucecss/scss/spruce' with ( $settings: ( prefix: 'my-custom-prefix' ));
Generated CSS custom properties:
css:root { --spruce-alert-color-danger: #db2929; --spruce-alert-color-info: #00a1d6; --spruce-alert-color-success: #00a854; --spruce-alert-color-warning: #f2ca26;}
utilities
We use just a few classical utility classes. We don’t plan to add too much in the future, but it can change. If we create more, it sure will always be opt-in.
Right now, you can globally turn them on using this snippet:
scss@use '~sprucecss/scss/spruce' with ( $settings: ( utilities: true ));