Built-in SASS Functions for Color and Math

SASS ships with a comprehensive library of built-in functions organised into modules: `sass:color`, `sass:math`, `sass:string`, `sass:list`, `sass:map`, and `sass:selector`. With the modern `@use` system, you import these modules explicitly and access functions through their namespace, such as `math.round()` or `color.adjust()`. The `sass:color` module provides powerful color manipulation functions. `color.adjust()` changes individual HSL or RGB channels by a given amount. `color.scale()` proportionally scales a channel relative to its current value — gentler than adjust. `color.mix()` blends two colors in a specified ratio. These functions enable programmatic color palette generation directly in SASS. The `sass:math` module provides arithmetic utilities including `math.div()` (division — the `/` operator was deprecated for division in SASS to avoid ambiguity with CSS `/`), `math.pow()`, `math.sqrt()`, `math.abs()`, `math.round()`, `math.ceil()`, `math.floor()`, and constants like `math.$pi` and `math.$e`.

Example

// ── sass:math and sass:color modules ─────────────────────────────────────────

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

// ── Math functions ────────────────────────────────────────────────────────────

$container-width : 1200px;
$gutter          : 24px;
$columns         : 12;

// Column width as a percentage
@function col-width($n) {
    $total: $container-width - ($gutter * ($columns - 1));
    @return math.div($total * $n, $columns) + ($gutter * ($n - 1));
}

.col-4 { width: math.percentage(math.div(4, 12)); }  // 33.333%
.col-6 { width: math.percentage(math.div(6, 12)); }  // 50%
.col-8 { width: math.percentage(math.div(8, 12)); }  // 66.667%

// Golden ratio spacing scale
$phi : math.$e * 0.56 + 1;  // approximation
$space: 1rem;
@for $i from 1 through 5 {
    .space-#{$i} { margin-bottom: math.round($space * math.pow(1.5, $i - 1) * 100) / 100 * 1rem; }
}

// ── Color functions ───────────────────────────────────────────────────────────

$base: #3498db;

// Palette generation from a single base color
$color-100: color.adjust($base, $lightness: 40%);   // very light
$color-300: color.adjust($base, $lightness: 20%);   // light
$color-500: $base;                                   // base
$color-700: color.adjust($base, $lightness: -15%);  // dark
$color-900: color.adjust($base, $lightness: -30%);  // very dark

.palette-demo {
    &-100 { background: $color-100; }
    &-300 { background: $color-300; }
    &-500 { background: $color-500; }
    &-700 { background: $color-700; }
    &-900 { background: $color-900; }
}

// color.mix for tints and shades
$tint  : color.mix(#fff, $base, 70%);   // 70% white mixed in
$shade : color.mix(#000, $base, 30%);   // 30% black mixed in

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned