Mixins & Functions

Defining Mixins

Mixins are reusable blocks of declarations. Define with @mixin and include with @include. They accept arguments with defaults, making them flexible across components.

Use mixins for patterns that cannot be a single class — vendor prefixes, complex media query blocks, and multi-property resets.

• Mixins output CSS each time they are included
• Use @content for mixin slots that accept custom blocks
• Prefer mixins over extends when output size matters

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  @include flex-center;
  min-height: 100dvh;
}

Mixin Arguments

Mixins accept positional and keyword arguments with default values. Use $name: value for defaults. Variable arguments ($args...) collect extra parameters.

Argument lists make mixins configurable without creating dozens of variants. A responsive mixin that accepts breakpoint and direction covers most layout needs.

@mixin respond-to($breakpoint) {
  @if $breakpoint == 'md' {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == 'lg' {
    @media (min-width: 1024px) { @content; }
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;

  @include respond-to('md') {
    grid-template-columns: repeat(2, 1fr);
  }
}

Custom Functions

Sass functions return a single value using @return. They compute colors, convert units, and derive spacing. Functions do not output CSS — they produce values used in properties.

Name functions descriptively and keep them pure (same input always produces same output). Side-effect-free functions are easier to test and reason about.

@function rem($px, $base: 16) {
  @return calc($px / $base) * 1rem;
}

@function tint($color, $amount) {
  @return mix(white, $color, $amount);
}

.body-text {
  font-size: rem(16);
  color: tint($color-primary, 20%);
}

Built-in Functions

Sass ships with extensive built-in modules. sass:color provides adjust, scale, and contrast functions. sass:math handles unit-safe calculations. sass:string and sass:list manipulate those data types.

Load built-in modules explicitly with @use "sass:color". This replaces the global built-in functions from older Sass versions.

• sass:color contrast-ratio() helps meet WCAG requirements
• sass:math.div() replaces the deprecated / division operator
• sass:map for accessing and merging map values

@use 'sass:color';
@use 'sass:math';

.badge {
  background: color.adjust($primary, $lightness: 10%);
  padding: math.div($space-unit, 2) $space-unit;
}

Mixin Libraries

Popular libraries like Bourbon and Compass provide battle-tested mixins. Modern projects often prefer lightweight custom mixins or PostCSS plugins instead.

Build a project-specific mixin library in a _mixins.scss partial. Document each mixin with comments explaining parameters and usage examples.

@mixin truncate($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}