color
Get color value by key and type name from the $colors map. The $colors map is nested, so you can access the color values by multiple levels, separated into groups.
The function returns a CSS custom property with a fallback color, but you can also access just the color value setting the $only-color value to true.
Argument(s)
| Name | Default Value | Description |
|---|---|---|
$key | The name of the color. | |
$type | base | The group of the color. |
$only-color | false | Wheater to get just the color value or the CSS custom property. |
Example(s)
scssa { color: spruce.color(primary);}
.has-error { color: spruce.color(danger, alert);}font-size
Get a value from the $font-sizes map by key name. By default, the function gives back a fluid font size using clamp(), which amount you can control using the $scaler value.
Argument(s)
| Name | Default Value | Description |
|---|---|---|
$key | The name of the font-size (defaults: h1, h2, h3, h4, h5, h6). | |
$fluid | true | Whether you want fluid declaration or not. |
$scaler | 15 | How much smaller font size do you want for the smaller screen in percentage. |
$optimal-size | 2vw + 1rem from the $settings map. | The optimal font-size value if $fluid is set to true. |
Example(s)
scss.title { font-size: spruce.font-size(h2);}
.serial-number { color: spruce.color(primary); font-size: spruce.font-size(h3, $scaler: 30);}responsive-font-size
It is hard to get generic font sizes that we can use throughout a whole project. Usually, we need unique ones. For this, we can set fluid declaration, similar to the font-size() function.
Argument(s)
| Name | Default Value | Description |
|---|---|---|
$size | The size of the font with a prefered unit. | |
$scaler | 15 | How much smaller font size do you want for the smaller screen in percentage. |
$optimal-size | 2vw + 1rem from the $settings map. | The optimal font-size value if $fluid is set to true. |
Example(s)
scss.testimonial-title { font-size: spruce.responsive-font-size(4rem, 30);}setting
Get a value by key name from the $settings map.
Argument(s)
| Name | Description |
|---|---|
$key | The name of the setting. |
Example(s)
scss@if spruce.setting(hyphens) { p, li, h1, h2, h3, h4, h5, h6 { hyphens: auto; overflow-wrap: break-word; }}spacer
Get a value by key name from the $spacers map.
Argument(s)
| Name | Description |
|---|---|
$key | The name of the spacer. |
Example(s)
scss.prism-code { padding: spruce.spacer(xs) spruce.spacer(m);}str-replace
Replace any specified value in a string.
Argument(s)
| Name | Default Value | Description |
|---|---|---|
$string | Initial string. | |
$search | Substring to replace. | |
$replace | '' | New value. |
Example(s)
scss// Get custom icon background for input and select fields@mixin field-icon( $icon, $color) { background-image: url('#{svg-escape(str-replace($icon, "#COLOR#", $color))}');}svg-escape
Escape the special characters in SVG when used as a data:image. The characters are declared under the $escaping-characters map.
Argument(s)
| Name | Description |
|---|---|
$svg | The <svg> element to escape. |
Example(s)
scss// Get custom icon background for input and select fields@mixin field-icon( $icon, $color) { background-image: url('#{svg-escape(str-replace($icon, "#COLOR#", $color))}');}transition
Get the transition values by key name. The function returns a CSS custom property.
Argument(s)
| Name | Description |
|---|---|
$key | The name of the transition attribut. Possible values: duration and timing-function. |
Example(s)
scss.custom-link { transition-duration: spruce.transition(duration); transition-property: all; transition-timing-function: spruce.transition(timing-function);}