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: color('primary');
}

.has-error {
  color: 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: color-contrast('blue'); // return white (hsl(0 0% 100%))
}

config

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.

Argument(s)

View Source on GitHub

Example(s)

scss
.element {
  border-radius: config('border-radius-lg', $display);
  block-size: 3rem;
  inline-size: 3rem;
}

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: font-size('h2');
}

.serial-number {
  color: color('primary');
  font-size: font-size('h3', 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 layout-center(
    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: 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 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: spacer('xs') 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)

View Source on GitHub

Example(s)

scss
.block {
  padding: spacer-clamp('m', 'l');
}

.block {
  padding: spacer-clamp('xs', 's', '2vw');
}

.block {
  padding: spacer-clamp(2rem, 'l');
}

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: transition('duration');
  transition-property: all;
  transition-timing-function: transition('timing-function');
}