Functions with the Built-in Modules

Compose sass:math, color, list, string and map into small, pure helper functions.

The real power of custom functions shows up when you lean on the built-in modules. Each module is a namespaced toolbox; a good helper function stitches a few of them together and returns exactly one value.

The modules at a glance

sass:math — div, round, pow, clamp, $pi.
sass:color — scale, adjust, mix, channel.
sass:list — nth, length, append, join.
sass:string — slice, index, to-upper-case, unquote.
sass:map — get, set, keys, merge.

A tiny, honest helper

@use 'sass:math';
@function rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}
.lead { font-size: rem(20px); } // 1.25rem

Keep functions pure: input in, value out, no side effects and no CSS emitted. That makes them trivial to reason about and safe to reuse anywhere a value is expected.

Example

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

// 1) Fluid type: clamp() built from a min/max at two viewports
@function fluid($min, $max, $from: 320px, $to: 1280px) {
  $slope: math.div($max - $min, $to - $from);
  $base:  $min - $slope * $from;
  @return clamp(
    #{$min},
    #{$base} + #{$slope * 100vw},
    #{$max}
  );
}

// 2) Readable text colour picked from luminance
@function on($bg) {
  $l: color.channel($bg, 'lightness', $space: hsl);
  @return if($l > 55%, #111827, #ffffff);
}

// 3) Turn a token key into a CSS var() reference
@function var-of($name) {
  @return string.unquote('var(--#{$name})');
}

.hero {
  font-size: fluid(1.5rem, 3rem);
  background: #CC6699;
  color: on(#CC6699);        // -> #ffffff
  border-color: var-of('brand-border');
}

When to use it

A design system's functions module combines sass:math and sass:color to expose a single tint() helper that adjusts both lightness and alpha in one call.
A developer writes a fluid-type() function that uses sass:math for clamped viewport arithmetic, hiding the complex clamp() formula behind a clean API.
A team centralizes all sass:map lookups in a _functions.scss module so callers never write raw map.get() chains — they call semantically named helpers.

More examples

Fluid type function using sass:math

Composes sass:math division and arithmetic to compute the slope and offset of a fluid type clamp() value from min/max pixel inputs.

@use 'sass:math';

@function fluid($min-px, $max-px, $min-vw: 320, $max-vw: 1280) {
  $slope: math.div($max-px - $min-px, $max-vw - $min-vw);
  $offset: $min-px - $slope * $min-vw;
  @return clamp(#{$min-px}px, #{$slope * 100}vw + #{$offset}px, #{$max-px}px);
}

h1 { font-size: fluid(24, 56); }

Color helper composing sass:color

Wraps color.mix() in two named functions so callers use semantically clear tint() and shade() instead of raw color.mix() calls.

@use 'sass:color';

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

@function shade($color, $amount) {
  @return color.mix(black, $color, $amount);
}

.badge {
  background: tint(#2563eb, 80%);
  color:      shade(#2563eb, 30%);
}

Module exporting only functions

A dedicated functions module imports math and token modules internally and exposes only clean helper functions to the rest of the codebase.

// abstracts/_functions.scss
@use 'sass:math';
@use 'sass:map';
@use 'tokens'   as t;

@function rem($px)    { @return math.div($px, 16) * 1rem; }
@function space($key) { @return map.get(t.$spacing, $key); }
@function color($key) { @return map.get(t.$colors,  $key); }

// Other files: @use 'abstracts/functions' as fn;
// .card { padding: fn.space(4); }

Discussion

Be the first to comment on this lesson.