Implement Tokens, Functions, and Mixins

Begin by defining spacing, color, typography, and breakpoint tokens. Use semantic naming for shared decisions and keep raw values in a centralized location where practical.

Next, implement a spacing function that reads from a map and raises an error for unknown tokens. Add a container mixin that accepts a maximum width and horizontal gutter. Add a focus-ring mixin that ensures interactive components share a consistent keyboard focus treatment.

Keep each abstraction focused. A token should represent a stable value, a function should calculate or retrieve a value, and a mixin should generate a reusable block of CSS.

Compile the source after each architectural step so that errors are identified before additional modules depend on the new API.

Capstone Abstracts

// abstracts/_tokens.scss
$spacing: (
  sm: 0.5rem,
  md: 1rem,
  lg: 1.5rem,
  xl: 2rem
);

$breakpoints: (
  tablet: 48rem,
  desktop: 72rem
);

// abstracts/_functions.scss
@use "sass:map";
@use "tokens";

@function spacing($name) {
  @if not map.has-key(tokens.$spacing, $name) {
    @error "Unknown spacing token: #{$name}";
  }

  @return map.get(tokens.$spacing, $name);
}

// abstracts/_mixins.scss
@mixin container($max-width: 72rem, $gutter: 1rem) {
  width: min(calc(100% - 2 * #{$gutter}), #{$max-width});
  margin-inline: auto;
}

@mixin focus-ring($color: #222) {
  &:focus-visible {
    outline: 3px solid $color;
    outline-offset: 3px;
  }
}

💡 The tokens module centralizes approved values. The function module imports the tokens module through @use and validates requested spacing keys. The mixins module provides reusable layout and accessibility patterns. Place each commented file in the corresponding directory. Sass resolves the relative module paths during compilation. This example illustrates the core abstractions; additional semantic color tokens and typography scales should be added for the full project.

Knowledge Check

What is the benefit of validating a spacing token inside the capstone function?

Implement Tokens, Functions, and Mixins

STAY UPDATED WITH BYTES!