Sass Built-in Functions

Categories of Built-in Functions

Sass's built-in functions fall into a few practical categories: string manipulation, unit inspection and conversion helpers, type introspection, and general-purpose helpers like if() that don't belong to any specific module.

@use 'sass:string';

$label: string.to-upper-case("save changes");
// => "SAVE CHANGES"

String functions are especially useful for generating consistent, transformed text values like uppercase labels or slugified identifiers.

Quick Reference Syntax

string.to-upper-case($s)
string.slice($s, $start, $end)
unit($number)
unitless($number)
if($condition, $if-true, $if-false)

• sass:string functions manipulate text: case conversion, slicing, searching, and quoting.
• unit() and unitless() inspect a number's unit, useful for defensive functions.
• if() is a global function for inline conditional values, not tied to any module.
• Most built-in functions are pure: given the same input, they always return the same output.

Sass Built-in Functions Cheatsheet

A broader reference beyond math and color functions.

sass:string Functions

String functions are useful whenever you're generating text-based CSS values dynamically, transforming a user-provided label into a consistent format, or building a class name safely from arbitrary text.

@use 'sass:string';

@function slugify($text) {
  @return string.to-lower-case($text);
}

.badge-#{slugify("New")} {
  background: gold;
}

Unit Inspection Functions

unit() and unitless() help write defensive functions that behave correctly (or raise a clear error) regardless of what unit a caller happens to pass in.

@function safe-add-px($value) {
  @if unitless($value) {
    @return $value * 1px;
  }
  @return $value;
}

The if() Global Function

if() evaluates a condition and returns one of two values, useful for short, inline conditional logic without a full @if/@else block, exactly as shown earlier in the Functions lesson.

$compact: true;

.card {
  padding: if($compact, 0.5rem, 1.5rem);
}

Common Mistakes

• Forgetting to @use 'sass:string'; (or the relevant module) before calling one of its functions.
• Confusing quote()/unquote() behavior, unquoting a value that's later used somewhere a quoted string was actually required.
• Not checking a value's unit with unit()/unitless() before performing arithmetic in a generic, reusable function.
• Overusing if() for logic that would be clearer as a full @if/@else block spanning multiple declarations.

Key Takeaways

• Beyond math and color, Sass ships useful string, unit-inspection, and general-purpose built-in functions.
• sass:string functions handle case conversion, slicing, and searching text values.
• unit() and unitless() help write functions that behave correctly regardless of input unit.
• if() remains the best tool for short, single-value inline conditionals.