Sass Built-in Functions — Standard Library Overview

In this tutorial, you will learn about Sass Built. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass built-in functions include color manipulation (lighten, darken, mix), math (ceil, floor, round, abs), list operations, map access, and string utilities.

What You'll Learn

You will learn the most useful built-in Sass functions organized by category, how to combine them, and which functions solve common styling problems.

Why It Matters

Built-in functions reduce custom code. DodaTech relies on Sass color functions for hover states and darken/lighten for theme variants without writing custom math.

Real-World Use

Durga Antivirus Pro uses color.adjust for Accessibility adjustments, math.div for calculations, and list functions for managing font stacks.

flowchart LR
    A[Custom Functions] --> B[Built-in Functions]
    B --> C[Color Functions]
    B --> D[Math Functions]
    B --> E[List Functions]
    B --> F[Map Functions]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Color Functions

$brand: #7c3aed;

.light-bg {
  background: lighten($brand, 30%);  // #d4b8f8
}

.dark-bg {
  background: darken($brand, 15%);   // #4a1d96
}

.desaturated {
  background: desaturate($brand, 30%);
}

.semi-transparent {
  background: rgba($brand, 0.5);
}

.inverted {
  background: invert($brand);  // #83c512
}

// Mix two colors
.gradient-mix {
  background: mix($brand, #f59e0b, 50%); // #8d6a7c
}

Expected output: Each declaration uses a different color transformation.

HSL Functions

$color: #7c3aed;

.hue-changed {
  background: adjust-hue($color, 180deg);       // Complementary hue
}

.more-saturated {
  background: saturate($color, 20%);
}

.lighter {
  background: lighten($color, 20%);
}

// Get individual HSL values
.hue-value {
  content: str-slice(hue($color) + "", 1, 4);    // 271
}

.saturation-value {
  content: saturation($color) + "";               // 83%
}

.lightness-value {
  content: lightness($color) + "";                // 58%
}

Expected output: HSL transformations and individual channel values.

Math Functions

.rounded {
  width: ceil(10.3px);     // 11px
  height: floor(10.7px);   // 10px
  padding: round(10.5px);  // 11px (rounds to nearest)
  top: abs(-20px);         // 20px
  max: max(100px, 200px);  // 200px
  min: min(100px, 200px);  // 100px
}

// Division (use math.div in modern Sass)
@use "sass:math";

.column {
  width: math.div(100%, 3);  // 33.33333%
  padding: math.div(16px, 2); // 8px
}

Expected output: Mathematical operations with correct rounding and division.

List Functions

$fonts: ("Inter", "Roboto", "sans-serif");

.first-font {
  font-family: nth($fonts, 1);    // "Inter"
}

.font-count {
  content: length($fonts) + "";   // 3
}

$colors: ();
$colors: append($colors, "red");     // ("red")
$colors: join($colors, ("blue", "green")); // ("red", "blue", "green")

.index-of-blue {
  content: index($colors, "blue") + ""; // 2
}

Expected output: List operations returning indexed values and metadata.

Map Functions

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
);

.md-value {
  width: map-get($breakpoints, md); // 768px
}

.has-lg {
  content: map-has-key($breakpoints, lg) + ""; // true
}

.all-keys {
  content: map-keys($breakpoints);     // sm, md, lg
}

.all-values {
  content: map-values($breakpoints);   // 576px, 768px, 992px
}

// Merge maps
$extended: map-merge($breakpoints, (xl: 1200px));

Expected output: Map functions for accessing and manipulating key-value data.

String Functions

$name: "DodaTech";

.lower {
  content: to-lower-case($name); // "dodatech"
}

.upper {
  content: to-upper-case($name); // "DODATECH"
}

.length {
  content: str-length($name) + ""; // 8
}

.sliced {
  content: str-slice($name, 1, 4); // "Doda"
}

// Quote and unquote
.quoted {
  content: quote(DodaTech);       // "DodaTech"
}

.unquoted {
  content: unquote("DodaTech");   // DodaTech
}

Expected output: String transformations for dynamic content generation.

Selector Functions

$parent: ".card";
$element: "__title";

.selector-result {
  content: selector-nest($parent, $element); // .card __title
}

.is-superselector {
  content: selector-is-superselector(".nav", ".nav .link") + ""; // true
}

.simple {
  content: selector-simple-selectors(".card.active") + ""; // .card .active
}

Expected output: Selector manipulation for advanced Metaprogramming.

Common Mistakes

1. Using Deprecated Functions

lighten and darken are not color-space aware. For new projects, use color.adjust() from the color module.

2. Forgetting to @use Module Namespace

Modern Sass requires @use "sass:math" then math.div(). The old / for division is deprecated.

3. Wrong Function Names

ceil not ceiling, floor not round. Check the Sass documentation for exact names.

4. Unit Mismatches in Math

Mixing px and em in max() or min() can produce unexpected results. Use the same units.

5. Not Using Module Functions

sass:color, sass:math, sass:list, and sass:map are the recommended namespaced modules.

Practice Questions

1. What function returns the lightness of a color? lightness($color) returns the HSL lightness percentage.

2. How do you divide two numbers in modern Sass? Use @use "sass:math" then math.div($a, $b).

3. What function retrieves a value from a map? map-get($map, $key) returns the value for the given key.

4. How do you check if a list contains a value? index($list, $value) returns the index or null if not found.

5. What function rounds a number up? ceil($number) rounds up to the nearest whole number.

Challenge

Use built-in functions to create a color palette from a single base color. Generate 10 lighter shades (using lighten or color.adjust) and 10 darker shades. Use math functions to calculate the step percentage.

FAQ

Mini Project

Create a color system using built-in functions. Define a base primary color, then generate: hover (darken 10%), active (darken 20%), disabled (desaturate 50%), light backgrounds (lighten 40%), and borders (darken 15%, desaturate 20%).

What's Next

Deep dive into Sass Color Functions for palette generation. Then explore Sass Math Functions for calculations.