Functions

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

View Source on GitHub

Example(s)

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