Mixins

breakpoint

With the breakpoint mixin, you can create a min-width based (mobile-first) breakpoint on a predefined breakpoint from the $breakpoints map.

The predefined breakpoints are the following:

scss
$breakpoints: (
  'xs': 32em,
  'sm': 48em,
  'md': 64em,
  'lg': 80em,
  'xl': 90em,
  'xxl': 110em,
);

Argument(s)

View Source on GitHub

Example(s)

scss
.footer {
  display: block;
  align-items: center;

  @include breakpoint('md') { // @media (min-width: 64em)
    display: flex;
    justify-content: space-between;
  }
}

btn-variant

Using the btn-variant mixin, you can create a new button variant. First, you must declare the colors of the new button (background, foreground is required) in the $colors map at the very first @use of

Argument(s)

View Source on GitHub

Example(s)

Declare the colors of the button. The mixin will search for the keys under the btn object.

scss
@use 'sprucecss/scss/spruce' with (
  $colors: (
    'btn': (
      'custom-background': hsl(0deg 0% 95%),
      'custom-foreground': hsl(0deg 0% 10%),
    ),
  ),
);

In many cases, declaring just the background and foreground color is enough. Spruce will generate the rest (hover states). But if you want to control more or use dark mode (where you want to overwrite the color values), you can be more specific.

scss
@use 'sprucecss/scss/spruce' with (
  $colors: (
    'btn': (
      'primary-background': hsl(261deg 52% 59%),
      'primary-background-hover': hsl(261deg 52% 49%),
      'primary-foreground': hsl(0deg 0% 100%),
      'primary-foreground-hover': hsl(0deg 0% 100%),
      'primary-focus-ring': hsl(261deg 52% 59% / 0.25),
    ),
  ),
);

scss
.btn--custom {
  @include btn-variant('custom');
}

html
<a href="https://conedevelopment.com" class="btn btn--custom btn--lg">Go to Cone</a>

btn-variant-outline

Using the btn-variant-outline mixin, you can create a new outlined button variant. First, you must declare the colors of the new button (background, foreground is required) in the $colors map at the very first @use of

Argument(s)

View Source on GitHub

Example(s)

scss
.btn--outline-primary { @include btn-variant-outline('primary'); }
.btn--outline-secondary { @include btn-variant-outline('secondary'); }

font-face

The font-face mixin is a helper to generate a @font-face declaration. This is a minimal and modern font-face declaration, so it only supports the .woff2 format (under the $src argument).

Argument(s)

View Source on GitHub

Example(s)

scss
@include font-face(
  'Montserrat',
  '../fonts/montserrat-v25-latin-ext_latin-regular.woff2'
);

@include font-face(
  'Montserrat',
  '../fonts/montserrat-v25-latin-ext_latin-700.woff2',
  '700'
);

focus-ring

The focus-ring() is a small internal helper mixin to set up the focus state of the form fields, buttons (or anything). We call it on the .form-control, .form-check, .form-switch, .form-range, and button variants. For these calls, it works with global, related variables.

Argument(s)

View Source on GitHub

Example(s)

scss
.form-control:focus {
  @include focus-ring(
    $type: config('focus-ring-type', $form-control, false),
    $border-color: color('border-focus', 'form'),
    $ring-color: color('ring-focus', 'form'),
    $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false),
    $ring-size: config('focus-ring-size', $form-control, false),
    $ring-offset: config('focus-ring-offset', $form-control, false)
  );
}

field-disabled

The field-disabled() is a small internal helper mixin to set up the disabled state on form fields. We call it on the .form-control and .form-check classes.

Argument(s)

View Source on GitHub

Example(s)

scss
.form-control:[disabled],
.form-control:[disabled='true'] {
  @include field-disabled(
    color('background-disabled', 'form'),
    color('border-disabled', 'form')
  );
}

field-icon

The field-icon() mixin is a getter function for form input backgrounds. Spruce CSS uses custom images (used as inline SVG) for various inputs (checkbox, radio, select, success, error states).

This mixin first replaces the given color value as a fill value on the SVG image then escapes it.

It is helpful for dark mode because we can’t pass a CSS variable to an inline SVG, so we have to overwrite it.

Argument(s)

View Source on GitHub

Example(s)

scss
select {
  select.form-control:not([multiple]):not([size]) {
    @include field-icon(
      config('select', $form-icon, false),
      color('select-foreground', 'form')
    );
  }
}

form-check

The form-check() mixin is a helper to create custom checkboxes. It accepts three selectors and generates radio and checkbox styles.

Argument(s)

View Source on GitHub

Example(s)

scss
@include form-check('.form-check', '.form-check__control', '.form-check__label', true);

layout-center

With the help of the layout-center mixin, you can center any element. It is most useful for the generic container element for the main layouts.

Argument(s)

View Source on GitHub

Example(s)

scss
.hero {
  &__container {
    @include layout-center(
      spacer-clamp('m', 'l')
    );
  }
}

layout-stack

Using the help of the layout-stack mixin, you can classical stack layout where the elements are stacked under each other.

Argument(s)

View Source on GitHub

Example(s)

scss
ul {
  @include layout-stack('xs');
}

layout-grid

With the help of the layout-grid mixin you can create auto-fit grid layouts where you can determine the columns' min-width.

Argument(s)

View Source on GitHub

Example(s)

scss
.docs-cards {
  &__inner {
    @include layout-grid('l', 20rem);
  }
}

layout-sidebar

Using the layout-sidebar mixin, you can create a two-column sidebar layout declaring the sidebar width explicitly.

Argument(s)

View Source on GitHub

Example(s)

scss
.docs-template {
  @include layout-sidebar('l', 22rem);
}

layout-flex

Using the layout-flex mixin, you can create intrinsic flexbox grids with explicit column width.

Argument(s)

View Source on GitHub

Example(s)

scss
.form-row--mixed {
  --inline-size: 10rem;

  @include layout-flex;
}

selection

Using the selection mixin, you can simplify the ::selection declarations. Pick a background color value from the base subsection by name and let it calculate the contrast color for the foreground automatically.

Argument(s)

View Source on GitHub

Example(s)

scss
.footer {
  // @include selection(hsl(262deg 71% 49%));
  @include selection('secondary');
}

set-css-variable

Declare CSS custom properties through Spruce CSS to add the prefix. To get any CSS variable with prefix use the get-css-variable function.

Argument(s)

View Source on GitHub

Example(s)

scss
:root {
  @include set-css-variable((
    --container-gap: spacer-clamp('m', 'l')
  ));
}

transition

This mixin aims to query the transition variables easier. Usually, you only need the global values (e.g., for anything with a custom hover animation), but you can also overwrite the three basic arguments.

Argument(s)

View Source on GitHub

Example(s)

scss
.custom-link {
  @include transition;

  &:hover {
    background-color: pink;
  }
}

text-ellipsis

Crop text and display an ellipsis with multiline support where possible.

Argument(s)

View Source on GitHub

Example(s)

scss
.crop-text {
  @include text-ellipsis(2);
  inline-size: 20rem;
}

visually-hidden

Hide something from the screen but keep it visible for assistive technology.

View Source on GitHub

Example(s)

scss
.sr-only {
  @include visually-hidden;
}

scrollbar

Create natively styled custom scrollbars.

Argument(s)

View Source on GitHub

Example(s)

scss
code {
  @include scrollbar(
    $thumb-background-color: color('primary')
  );
  background-color: transparent;
  border-radius: 0;
  display: block;
  overflow-x: auto;
  padding: spacer('xs') 0;
}

clear-btn

Clear the default browser button styles.

View Source on GitHub

Example(s)

scss
.remove-button-styles {
  @include clear-btn;
}

clear-list

Remove the list-style, margin, and padding stylings from the element.

View Source on GitHub

Example(s)

scss
ul {
  @include clear-list;
}

a11y-card-link

Create better card component linking by only using the title’s link (and not the whole block). Please visit this article about cards by Heydon Pickering for more information about the technique.

View Source on GitHub

Example(s)

scss
.card {
  @include a11y-card-link('.card__link', true);
  border: 1px solid color('border');
  border-radius: config('border-radius-lg', $display);
  padding: spacer('m');

  &__link {
    color: color('heading');
    font-size: font-size('h3');
    font-weight: 700;
    text-decoration: none;
  }
}

word-wrap

Break long strings of text.

View Source on GitHub

Example(s)

scss
.break-long-url {
  @include word-wrap;
}