Sass Modules and Functions

Sass: Built-in Modules and Functions

Sass 22,539 ships seven built-in modules, loaded with @use "sass:<name>": color (adjust, scale, mix, channel), string (index, slice, unquote), math (div, round, clamp, percentage), list (nth, append, join), map (get, merge, deep-merge, keys), selector (nest, append, unify) and meta (type-of, call, load-css). The old global names such as lighten() and map-get() print DEPRECATION WARNING [global-builtin] with a replacement, for example Use map.keys instead.

modules.scss: one call from each built-in moduleSass

@use "sass:color"; @use "sass:list"; @use "sass:map"; @use "sass:math";
@use "sass:meta"; @use "sass:selector"; @use "sass:string";
$brand: #1565c0;
.demo {
  --tint: #{color.scale($brand, $lightness: 40%)};
  --label: #{string.to-upper-case("note")};
  --third: #{math.percentage(math.div(1, 3))};
  --size: #{list.nth(12px 16px 20px, 2)};
  --z: #{map.get((modal: 1050, toast: 1090), toast)};
  --type: #{meta.type-of(1rem)};
  --sel: #{selector.nest(".nav", "&:hover a")};
}

Compiled CSS: npx sass modules.scssSass

.demo {
  --tint: rgb(37.0074565037%, 63.2543496272%, 93.1101905551%);
  --label: NOTE;
  --third: 33.3333333333%;
  --size: 16px;
  --z: 1090;
  --type: number;
  --sel: .nav:hover a;
}

The --tint line surprises people upgrading old code: current Dart Sass supports CSS Color 4 spaces and no longer rounds channels, so a scaled color prints as valid fractional percentages instead of hex. Lists and strings are 1-indexed, and Sass values are immutable: map.merge() returns a new map that you must assign back. For colors that should follow runtime theme changes, prefer native color-mix() (Color Values).

MENU

Sass Modules and Functions