Sass @function Rule

Beginner
11 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass @function rule defining reusable value helpers with @return
Definition

Definition and Usage

The Sass @function rule defines reusable operations on SassScript values. Write @function name($args…) { … }, and finish with @return. Call functions with normal CSS function syntax.

Names can be any Sass identifier that does not begin with --. Prefer functions for pure computation; use mixins when you need to emit CSS or other side effects.

Official pattern.

Per the Sass docs: abstract common formulas into readable helpers, then use the returned value in property declarations.

Hyphens = underscores.

Like other Sass identifiers, scale-color and scale_color refer to the same function.

No side effects.

Technically a function can set globals, but that is strongly discouraged. Keep functions for values; put side effects in mixins.

Syntax

Syntax

SCSS
@use "sass:math";

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

.title {
  font-size: rem(24px);
}

Pattern: declare arguments → compute → @return a value → call like a CSS function.

Reference

Arguments & Return

Core @function shapes:

FormMeaning
@function rem($px) { @return …; }Required args; must @return
$base: 16pxOptional argument with a default
rem(8px, $base: 16px)Keyword argument at the call site
sum($numbers...)Argument list — any number of extras
sum($widths...)Spread a list into positional args
@if … { @return $x; }Early exit for edge cases
Code

SCSS Examples

Each example defines and calls functions at compile time. Open View Compiled CSS for verified output.

Example 1 — Basic Function

Compute a value with loops and lists, then use it in a property.

SCSS
@use "sass:list";

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: list.nth($sequence, list.length($sequence))
      + list.nth($sequence, list.length($sequence) - 1);
    $sequence: list.append($sequence, $new);
  }
  @return list.nth($sequence, list.length($sequence));
}

.sidebar {
  float: left;
  margin-left: fibonacci(4) * 1px;
}

How It Works

  1. Build a sequence starting at 0 1.
  2. Loop $n times, appending the next sum.
  3. @return the last number (5 for n = 4).
  4. Multiply by 1px to get a length in CSS.

Example 2 — Optional & Keyword Args

Defaults fill missing values; keywords label what you override.

SCSS
@use "sass:math";

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

.title {
  font-size: rem(24px);
  padding: rem(8px, $base: 16px);
}

How It Works

  1. Omitting $base uses the default 16px.
  2. Keyword form makes the base explicit at the call site.
  3. math.div avoids slash-as-separator pitfalls.
  4. Result is a length browsers understand as rem.

Example 3 — Color Helper + Keywords

Custom hue invert plus a built-in keyword call from sass:color.

SCSS
@use "sass:color";

@function invert-hue($color, $amount: 100%) {
  $inverse: color.adjust($color, $hue: 180deg);
  @return color.mix($inverse, $color, $amount);
}

$primary-color: #036;

.header {
  background-color: invert-hue($primary-color, 80%);
}

.banner {
  color: color.scale($primary-color, $lightness: 40%);
}

How It Works

  1. Shift hue by 180°, then mix with the original.
  2. $amount controls how strong the invert is.
  3. Built-in color.scale shows named args on a module API.
  4. Prefer sass:color over deprecated global color helpers.

Example 4 — Argument Lists (...)

Accept any number of numbers, or spread a list into the call.

SCSS
@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

$widths: 50px, 30px, 100px;

.micro {
  width: sum(50px, 30px, 100px);
  min-width: sum($widths...);
}

How It Works

  1. Trailing ... collects extra positional args.
  2. @each walks the argument list.
  3. $widths... spreads a list into the same call.
  4. Both paths return 180px.

Example 5 — Early @return

Exit early for edge cases, then build the normal result path.

SCSS
@use "sass:string";
@use "sass:meta";

@function str-insert($string, $insert, $index) {
  // Avoid extra work when the string is empty.
  @if string.length($string) == 0 {
    @return $insert;
  }

  $before: string.slice($string, 1, $index);
  $after: string.slice($string, $index + 1);
  @return $before + $insert + $after;
}

.probe {
  --early: #{meta.inspect(str-insert("", "Hi", 1))};
  --mid: #{meta.inspect(str-insert("Hello", "-", 3))};
}

How It Works

  1. Empty string returns $insert immediately.
  2. Otherwise slice before/after the insert index.
  3. @return ends the function as soon as it runs.
  4. meta.inspect prints the string into a custom property for the demo.

Edge Cases & Pitfalls

Most @function bugs are missing returns, side effects, or typos that become plain CSS.

return

Every path must @return

A function alone emits no CSS. Every branch needs a returned value, including early exits.

mixin

Need styles? Use a mixin

Functions compute values. Emitting rules, nested selectors, or globals belongs in @mixin.

typo

Unknown names become CSS

Misspelled helpers often compile as plain CSS functions. Lint output or prefer namespaced module APIs.

rename

Keyword args are part of the API

Renaming a public parameter can break callers. Keep the old name temporarily and @warn during migration.

Toolchain

Sass Support

@function is a core Sass at-rule. Browsers never see it — only the values your functions return.

ImplementationStatus
Dart SassSupported (recommended)
LibSass / node-sassSupported (deprecated toolchain)
Ruby SassSupported (end-of-life)
BrowsersN/A — only see returned CSS values

Prefer Dart Sass for new projects. SCSS and indented syntax both support @function.

Remember

Key Takeaways

  • Compute: @function returns a value; call it like CSS.
  • Always @return — early returns are encouraged for edge cases.
  • Flexible APIs: defaults, keywords, and $args....
  • Pure values only — emit CSS with mixins, not functions.

One line: @function packages reusable calculations you call like CSS and resolve at compile time.

Compile

Compile Notes

@function never reaches the browser. Conceptual flow:

flow.txt
1. Define @function with arguments
2. Call it in a property value or expression
3. Evaluate the body until @return
4. Substitute the returned SassScript value
5. Emit CSS — browsers never see the function name

Frequently Asked Questions

A @function defines a reusable SassScript calculation. You call it with normal CSS function syntax, and it must end by returning a value with @return.
Functions compute and return values used in property values or other expressions. Mixins (@mixin / @include) insert styles (and can use @content). Use mixins for side effects; use functions just to compute values.
Yes. @return is only allowed inside @function, and each function must return a value. When Sass hits @return, the function ends immediately—useful for early exits.
Yes. Give defaults with $name: value, and call with keywords like rem(8px, $base: 16px). The last parameter can end in ... to accept an argument list.
Unknown calls compile to plain CSS functions (unless they use Sass-only argument syntax). That makes typos easy to miss—lint your CSS output or stick to namespaced module APIs.
Yes. Like other Sass identifiers, scale-color and scale_color refer to the same function.

Next: Sass @extend Rule

Share styles across selectors by merging them in the cascade.

Sass @extend Rule →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass @mixin and @include Sass @extend Rule