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.
The color function also handles null values, which means in Sass that your declaration block won’t render if the value you access is null.
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. |
$map | $colors | The name of the map from which the function will get the values. |
Example(s)
scssa { color: spruce.color(primary);}
.has-error { color: spruce.color(danger, alert);}color-contrast
Get a contrast color (black or white) based on the given one. Spruce use this function internally at selection mixin.
Argument(s)
| Name | Description |
|---|---|
$color | Any color value. |
Example(s)
scssa { color: spruce.color-contrast(blue); // return white (hsl(0 0% 100%))}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);}get-css-variable
Add the prefix value to a CSS custom properties. To set any CSS variable with prefix use the set-css-variable function.
Argument(s)
| Name | Description |
|---|---|
$var | The name of the variable without the prefix value. |
Example(s)
scss.container { @include spruce.layout-center( spruce.get-css-variable(--container-gap) );}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 preferred 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);}spacer-clamp
Create a clamp() declaration with values from the $spacers map or from any generic value. The goal of this helper function is to create fluid spacers more easily.
Argument(s)
| Name | Description |
|---|---|
$min | The name of the spacer. |
$max | The name of the spacer. |
$optimal | The optimal value which is fallback to the optimal-spacer-size setting. |
Example(s)
scss.block { padding: spruce.spacer-clamp(m, l);}
.block { padding: spruce.spacer-clamp(xs, s, '2vw');}
.block { padding: spruce.spacer-clamp(2rem, l);}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 attribute. 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);}