Why @return statement in SASS? - Purpose & Use Cases

The Big Idea

Discover how a single line can save you hours of tedious style updates!

The Scenario

Imagine you write a style that calculates a color shade by hand every time you need it. You copy and paste the same color math in many places.

The Problem

If you want to change the shade formula, you must find and update every copy manually. This wastes time and risks mistakes or inconsistent colors.

The Solution

The @return statement lets you create reusable functions that calculate and send back values. Change the function once, and all uses update automatically.

Before vs After

✗ Before

$shade1: lighten(#333, 10%);
$shade2: lighten(#333, 10%);
$shade3: lighten(#333, 10%);

✓ After

@function shade($color) {
  @return lighten($color, 10%);
}
$shade1: shade(#333);
$shade2: shade(#333);
$shade3: shade(#333);

What It Enables

You can write clean, DRY styles that adapt easily by returning values from functions with @return.

Real Life Example

When theming a website, you can create a function that returns a color based on a base color. Changing the base updates all related colors instantly.

Key Takeaways

Manually repeating calculations is slow and error-prone.

@return lets functions send back values to reuse.

This makes styles easier to maintain and update.