Sass Functions

What Is a Sass Function?

A function takes zero or more arguments and returns exactly one value using @return. Sass ships many built-in functions (through modules like sass:math and sass:color), and you can define your own with @function.

Functions are used anywhere a value is expected: inside a declaration, inside another function call, or as an argument to a mixin.

@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16px) * 1rem;
}

.title {
  font-size: rem(24px); // => 1.5rem
}

rem() takes a pixel value and returns the equivalent rem value; it's called just like a built-in function such as math.div().

Function Definition Syntax

@function name($param) {
  @return value;
}

• @function name(...) { ... } defines a reusable function.
• @return value; ends the function, sending that value back to the caller.
• A function can contain intermediate logic (variables, @if, loops) before its final @return.
• Functions are called with parentheses, just like built-in functions: rem(24px).

Sass Functions Cheatsheet

Frequently used built-in and custom function patterns.

Built-in Functions: A Quick Look

Sass ships dozens of built-in functions across its built-in modules. if() is a particularly useful global function: an inline conditional that returns one of two values without needing a full @if/@else block.

$dark-mode: true;

.text {
  color: if($dark-mode, #f1f5f9, #1f2937);
}

Defining a Simple Function

Custom functions follow the same argument syntax as mixins, positional or named parameters, optional defaults, but must end every code path with a @return statement.

@function double($n) {
  @return $n * 2;
}

.box {
  width: double(50px); // => 100px
}

Functions vs Mixins, Revisited

The clearest signal for choosing a function over a mixin: does this operation produce exactly one value used inside a declaration, or does it produce a set of declarations? A pixel-to-rem converter is a function; a flexbox-centering helper is a mixin.

Common Mistakes

• Forgetting @return inside a function, which causes a compile error since every code path must return a value.
• Trying to use @include to call a function instead of calling it directly with parentheses inside a value.
• Writing a function that outputs CSS declarations directly, which isn't possible, functions can only return a value.
• Using / for division inside a function instead of math.div(), silently producing incorrect results in some Dart Sass versions.

Key Takeaways

• A Sass function computes and returns exactly one value using @function and @return.
• Sass ships many built-in functions through modules like sass:math, sass:color, and sass:map.
• The global if() function is useful for simple inline conditionals.
• Choose a function when you need a single computed value; choose a mixin when you need to output declarations.