Built-in Modules
sass: built-in modules ship every utility you reach for: math, color, list, map, string, meta. They’re imported with @@use and called with namespace.
The modules + recipes
EXAMPLE
@use 'sass:math';
@use 'sass:color';
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
@use 'sass:meta';
// === math ===
math.div(100%, 3) // 33.3333%
math.percentage(0.42) // 42%
math.round(3.7) // 4
math.pow(2, 10) // 1024
math.sqrt(16) // 4
math.min(8px, 16px) // 8px (unit-aware)
math.unit(16px) // 'px'
// === color ===
$brand: #04AA6D;
color.scale($brand, $lightness: -15%); // 15% darker
color.adjust($brand, $alpha: -0.2); // 20% more transparent
color.mix($brand, white, 30%); // 30% white
color.complement($brand); // opposite hue
color.invert($brand);
color.grayscale($brand);
color.channel($brand, 'red', $space: rgb);
// === list ===
list.length((1 2 3)) // 3
list.nth((a b c), 2) // b
list.append((1 2), 3) // (1 2 3)
list.join((1 2), (3 4)) // (1 2 3 4)
list.index((a b c), 'b') // 2
list.set-nth((a b c), 2, 'X') // (a X c)
list.zip((a b c), (1 2 3)) // ((a 1) (b 2) (c 3))
// === map ===
$theme: (brand: #04AA6D, danger: #c33);
map.get($theme, brand) // #04AA6D
map.has-key($theme, brand) // true
map.keys($theme) // brand, danger
map.values($theme)
map.merge($theme, (info: #2965F1));
map.remove($theme, danger);
// === string ===
string.to-upper-case('btn') // BTN
string.length('hello') // 5
string.slice('button-primary', 8) // 'primary'
string.index('button-primary', '-') // 7
string.insert('btn', '-primary', 4) // 'btn-primary'
string.unique-id() // u123 — for unique class names
// === meta — reflection ===
meta.type-of(16px) // 'number'
meta.type-of('hi') // 'string'
meta.variable-exists('brand') // true / false
meta.module-functions(math) // map of name → function ref
Why it matters
These modules replace nearly every “global function” pattern from old Sass. @@use 'sass:math' + math.div is the modern shape; the global / is on its way out.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Exercise
Load a partial with the modern at-rule.
'buttons';
Starts with @u.
Discussion
Loading…