Variables

Get Any Variable

To get a variable, use one of the getters, or the variable name with the spruce namespace (or without one if you imported the code with as *).

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); // or radius('lg')
  box-shadow: shadow('md');
  color: color('secondary');
  font-size: font-size('h2');
  padding-block: spacer('m');
  z-index: z-index('dropdown');
}

Override Variables

There are two types of variables: single values and maps. All of them can be overwritten or extended with the with option of @use. The maps are merged, so you only set the keys you change.

@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,
  ),
);

You must do the overwrite (of any of the variables or maps) at the first use of @use in your code — more information about the newer imports in Sass.

Change Values at Runtime

In custom property mode, the values are CSS custom properties, so you can change them without recompiling: globally, for a section, or for a single component through the style hooks.

/* Every button in the hero gets a bigger padding and a pill shape. */
.hero {
  --spruce-btn-padding: 1em 1.75em;
  --spruce-btn-border-radius: 62.5rem;
}

Want to change many values at once and keep them together? Create a style preset.

Edit on GitHub