Built-in Modules: sass:math, sass:color, sass:list, and sass:map

Modern Sass organizes many built-in functions into modules. Use @use to access these APIs through explicit namespaces.

Important modules include:

sass:math for mathematical functions and unit-related operations.
sass:color for color manipulation and color-space operations.
sass:list for working with ordered collections.
sass:map for key-value collections.
sass:string for string operations.
sass:meta for introspection and type information.

Namespaced APIs improve clarity and reduce ambiguity. For example, math.div(12px, 3) communicates that a mathematical division function is being used.

Legacy global built-in function calls may still appear in older code, but new projects should favor the module system and consult the installed Dart Sass documentation for supported APIs.

Prefer module-based APIs

Use namespaced built-in functions such as math.div() and map.get() in modern Sass. Verify the availability and argument syntax of individual APIs in the Dart Sass documentation.

Use Sass Built-in Modules

@use "sass:math";
@use "sass:color";
@use "sass:list";
@use "sass:map";

$colors: (
  primary: #5b5bd6,
  danger: #c62828
);

$primary: map.get($colors, primary);
$spacing: math.div(24px, 2);
$first-color: list.nth((red, green, blue), 1);
$muted-primary: color.adjust($primary, $lightness: 10%);

.card {
  color: $primary;
  padding: $spacing;
  border-color: $muted-primary;
}

.label {
  content: $first-color;
}

💡 The example demonstrates namespaced calls from four built-in modules. The map lookup retrieves the primary color, the math module calculates a spacing value, the list module retrieves the first item, and the color module adjusts a color. The content declaration is included only to demonstrate the resulting Sass value and is not a recommended way to display user-facing text. In application styles, use these computed values in appropriate visual declarations.

Knowledge Check

Which module provides the `map.get()` function?

Built-in Modules: sass:math, sass:color, sass:list, and sass:map

STAY UPDATED WITH BYTES!