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)

NameDefault ValueDescription
$keyThe name of the color.
$typebaseThe group of the color.
$only-colorfalseWheater to get just the color value or the CSS custom property.
$map$colorsThe name of the map from which the function will get the values.

View Source on GitHub

Example(s)

scss
a {
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)

NameDescription
$colorAny color value.

View Source on GitHub

Example(s)

scss
a {
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)

NameDefault ValueDescription
$keyThe name of the font-size (defaults: h1, h2, h3, h4, h5, h6).
$fluidtrueWhether you want fluid declaration or not.
$scaler15How much smaller font size do you want for the smaller screen in percentage.
$optimal-size2vw + 1rem from the $settings map.The optimal font-size value if $fluid is set to true.

View Source on GitHub

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)

NameDescription
$varThe name of the variable without the prefix value.

View Source on GitHub

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)

NameDefault ValueDescription
$sizeThe size of the font with a preferred unit.
$scaler15How much smaller font size do you want for the smaller screen in percentage.
$optimal-size2vw + 1rem from the $settings map.The optimal font-size value if $fluid is set to true.

View Source on GitHub

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)

NameDescription
$keyThe name of the setting.

View Source on GitHub

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)

NameDescription
$keyThe name of the spacer.

View Source on GitHub

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)

NameDescription
$minThe name of the spacer.
$maxThe name of the spacer.
$optimalThe optimal value which is fallback to the optimal-spacer-size setting.

View Source on GitHub

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)

NameDefault ValueDescription
$stringInitial string.
$searchSubstring to replace.
$replace''New value.

View Source on GitHub

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)

NameDescription
$svgThe <svg> element to escape.

View Source on GitHub

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)

NameDescription
$keyThe name of the transition attribute. Possible values: duration and timing-function.

View Source on GitHub

Example(s)

scss
.custom-link {
transition-duration: spruce.transition(duration);
transition-property: all;
transition-timing-function: spruce.transition(timing-function);
}