Variables

Spruce CSS is a highly customizable through variables. In this post, you will learn how to get and customize them.

To get a variable, you have to use one of the getters or the variable name with the spruce namespace (or without one if you imported the code that way).

To see the complete list of the getter functions, please visit the functions page.

@use 'sprucecss/scss/spruce' as *;

.component {
  border-radius: config('border-radius-lg', $display);
  color: color('secondary');
  font-size: font-size('h2');
  padding-block: spacer('m');
}

There are two types of variables: single one and map. All of them are overwritable, expandable with @use's with option.

@use 'sprucecss/scss/spruce' with (
  $colors: (
    'base': (
      'primary-darkest': hsl(272deg 100% 9%),
      'heading': hsl(271deg 100% 9%),
    ),
    'btn': (
      'new-background': hsl(0deg 0% 95%),
      'new-foreground': hsl(0deg 0% 10%),
    ),
  ),
  $btn-lg: (
    'border-radius': 0.25em,
    'text-transform': uppercase,
  ),
  $layout: (
    'container-inline-size': 70rem,
  ),
);