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.
| Name | Default Value | Description |
|---|---|---|
$key | The name of the color. | |
$type | 'base' | The group of the color. |
$only-color | false | Whether 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. |
a {
color: color('primary');
}
.has-error {
color: color('danger', 'alert');
}Get only the color value by key and type name from the $colors map.
| Name | Default Value | Description |
|---|---|---|
$key | The name of the color. | |
$type | 'base' | The group of the color. |
$map | $colors | The name of the map from which the function will get the values. |
a {
color: color-value('primary');
}
.has-error {
color: color-value('danger', 'alert');
}Get a contrast color (black or white) based on the given one. Spruce use this function internally at selection mixin.
| Name | Description |
|---|---|
$color | Any color value. |
a {
color: color-contrast('blue'); // return white (hsl(0 0% 100%))
}Using the config() function, you can get any key value from any map. It is a wrapper function for map.get.
If you use the CSS custom property mode, you should always use this function because this will return you the proper custom property.
| Name | Default Value | Description |
|---|---|---|
$key | The name of the key. | |
$map | The name of the map. | |
$custom-property | true | Whether if you want CSS custom property or not. |
.element {
border-radius: config('border-radius-lg', $display);
block-size: 3rem;
inline-size: 3rem;
}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.
| 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. |
.title {
font-size: font-size('h2');
}
.serial-number {
color: color('primary');
font-size: font-size('h3', 30);
}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)
.container {
@include layout-center(
get-css-variable(--container-gap)
);
}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.
| 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. |
.testimonial-title {
font-size: responsive-font-size(4rem, 30);
}Get a value by key name from the $settings map.
| Name | Description |
|---|---|
$key | The name of the setting. |
@if setting('hyphens') {
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
hyphens: auto;
overflow-wrap: break-word;
}
}Get one or two (separated with a colon) values by key name from the $spacers map.
| Name | Description |
|---|---|
$key | The name of the spacer or shorthand for two values separated with a colon ('m:l'). |
.prism-code {
padding: spacer('xs') spacer('m');
}
.prism-code {
padding: spacer('xs:m');
}The shorthand syntax is useful when you want a separate value for block and inline. It only supports two value.
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.
| 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. |
.block {
padding: spacer-clamp('m', 'l');
}
.block {
padding: spacer-clamp('xs', 's', '2vw');
}
.block {
padding: spacer-clamp(2rem, 'l');
}Replace any specified value in a string.
| Name | Default Value | Description |
|---|---|---|
$string | Initial string. | |
$search | Substring to replace. | |
$replace | '' | New value. |
// Get custom icon background for input and select fields
@mixin field-icon(
$icon,
$color
) {
background-image: url('#{svg-escape(str-replace($icon, "#COLOR#", $color))}');
}Escape the special characters in SVG when used as a data:image. The characters are declared under the $escaping-characters map.
| Name | Description |
|---|---|
$svg | The <svg> element to escape. |
// Get custom icon background for input and select fields
@mixin field-icon(
$icon,
$color
) {
background-image: url('#{svg-escape(str-replace($icon, "#COLOR#", $color))}');
}
