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)

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 prefered 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. 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');
}

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 attribut. 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);
}