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.
$type'base'The group of the color.
$only-colorfalseWhether 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)

a {
  color: color('primary');
}

.has-error {
  color: color('danger', 'alert');
}

color-value

Get only the color value by key and type name from the $colors map.

Argument(s)

NameDefault ValueDescription
$keyThe name of the color.
$type'base'The group of the color.
$map$colorsThe name of the map from which the function will get the values.

View Source on GitHub

Example(s)

a {
  color: color-value('primary');
}

.has-error {
  color: color-value('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)

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)

NameDefault ValueDescription
$keyThe name of the key.
$mapThe name of the map.
$custom-propertytrueWhether if you want CSS custom property or not.

View Source on GitHub

Example(s)

.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)

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)

.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)

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

View Source on GitHub

Example(s)

.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)

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)

.testimonial-title {
  font-size: 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)

@if setting('hyphens') {
  p,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

spacer

Get one or two (separated with a colon) values by key name from the $spacers map.

Argument(s)

NameDescription
$keyThe name of the spacer or shorthand for two values separated with a colon ('m:l').

View Source on GitHub

Example(s)

.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.

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)

.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)

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

View Source on GitHub

Example(s)

// 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)

// Get custom icon background for input and select fields
@mixin field-icon(
  $icon,
  $color
) {
  background-image: url('#{svg-escape(str-replace($icon, "#COLOR#", $color))}');
}