@return statement in SASS

Introduction

The @return statement sends a value back from a Sass function. It helps reuse calculations and keep code clean.

When you want to create a reusable color calculation.

When you need to compute a size or spacing value once and use it multiple times.

When you want to write a function that returns a customized CSS value based on inputs.

When you want to keep your styles organized by separating logic into functions.

Syntax

SASS

@function function-name($parameter) {
  @return value;
}

The @return must be inside a @function.

Only one value can be returned at a time.

Examples

This function doubles the input number and returns it.

SASS

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

This function returns a lighter shade of black based on the input.

SASS

@function make-color($shade) {
  @return lighten(#000000, $shade);
}

Sample Program

This Sass code defines a function that multiplies the input size by 1.5 and returns it. Then it uses that function to set padding on a container.

SASS

@function calculate-padding($size) {
  @return $size * 1.5;
}

.container {
  padding: calculate-padding(2rem);
  background-color: #eee;
}

Important Notes

Functions with @return help avoid repeating the same math in many places.

If you forget @return, the function will not output a value and may cause errors.

Summary

The @return statement sends a value back from a Sass function.

Use it to create reusable calculations and keep your styles clean.

Always place @return inside a @function.