iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

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

Example
@use 'sass:math';
@use 'sass:list';
@use 'sass:map';
@use 'sass:color';
Try it Yourself »

Exercise

Load a partial with the modern at-rule.

'buttons';

Discussion

Loading…