Sass Built-in Modules

Sass ships several built-in modules that provide math, color manipulation, string, list, map, and meta-programming functions. This lesson introduces each built-in module and shows practical examples of the functions you'll reach for most often.

What Are Sass Built-in Modules?

Built-in modules are loaded exactly like your own files, using @use, but with a sass: prefix instead of a file path. They replace older global functions (like the unqualified percentage() still available for backward compatibility) with clearly namespaced equivalents.

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

.box {
  width: math.div(100%, 3);
  background: color.adjust(#2563eb, $lightness: -10%);
}

math.div() replaced the old / division operator for arithmetic, and color.adjust() replaced several separate legacy color functions.

Loading Built-in Modules

@use 'sass:math';
@use 'sass:color';
@use 'sass:string';
@use 'sass:list';
@use 'sass:map';
@use 'sass:meta';

Every built-in module uses the sass: prefix instead of a relative file path.
The default namespace matches the module name, math, color, string, and so on.
Built-in modules cannot be aliased away with as * in the same free-form way as regular files in newer Dart Sass versions without an explicit alias.
You only need to @use the specific built-in modules whose functions you actually call.

Sass Built-in Modules Cheatsheet

The most commonly used functions from each built-in module.

Module	Function	Purpose
`sass:math`	`math.div($a, $b)`	Safe division (replaces the `/` operator)
`sass:math`	`math.round($n)`	Rounds a number to the nearest integer
`sass:math`	`math.clamp($min, $n, $max)`	Clamps a number within a range
`sass:color`	`color.adjust($c, $lightness: 10%)`	Lightens, darkens, or shifts a color
`sass:color`	`color.scale($c, $alpha: -50%)`	Scales a color channel proportionally
`sass:string`	`string.to-upper-case($s)`	Converts a string to uppercase
`sass:list`	`list.nth($list, $n)`	Gets an item from a list by index
`sass:map`	`map.get($map, $key)`	Gets a value from a map by key
`sass:meta`	`meta.type-of($value)`	Returns a value's Sass data type

The sass:math Module

sass:math provides arithmetic and rounding functions, most importantly math.div(), which replaced the ambiguous / division operator (which now only works for plain CSS division syntax, like in font: 16px/1.5).

@use 'sass:math';

$container: 1200px;
$columns: 12;

.column {
  width: math.div($container, $columns);
}

The sass:color Module

sass:color provides functions to inspect and adjust colors: lightening, darkening, adjusting opacity, mixing two colors, and extracting individual channels like hue or saturation.

@use 'sass:color';

$primary: #2563eb;

.button {
  background: $primary;

  &:hover {
    background: color.adjust($primary, $lightness: -8%);
  }
}

sass:list, sass:map, and sass:meta

sass:list and sass:map provide utilities for working with Sass's collection types, while sass:meta offers introspection functions useful for writing more generic, defensive mixins and functions.

Module	Example	Result
`sass:list`	`list.length((sm, md, lg))`	`3`
`sass:map`	`map.get((sm: 8px, md: 16px), md)`	`16px`
`sass:meta`	`meta.type-of(10px)`	`"number"`
`sass:meta`	`meta.variable-exists('primary')`	`true` or `false`

Common Mistakes

Using the plain / operator for arithmetic division; it is deprecated for math and should be replaced with math.div().
Forgetting to @use 'sass:math'; (or the relevant module) before calling one of its functions.
Confusing legacy global functions (like lighten()) with the modern color.adjust() / color.scale() equivalents; both currently work, but the module versions are more flexible and are the direction Sass is moving.
Not realizing sass:meta functions exist, and instead writing brittle mixins that don't handle unexpected input types gracefully.

Key Takeaways

Built-in modules (sass:math, sass:color, sass:string, sass:list, sass:map, sass:meta) are loaded with @use and a sass: prefix.
math.div() is the modern, safe replacement for using / to divide numbers.
sass:color functions like color.adjust() and color.scale() handle most color manipulation needs.
sass:list, sass:map, and sass:meta provide the tools for writing more powerful, generic mixins and functions.

Pro Tip

Whenever you reach for a legacy global function like lighten(), darken(), or / for division, check whether the equivalent sass:color or sass:math module function offers more flexibility, most legacy globals are thin wrappers around a module function with fewer options.