Why custom functions are useful in SASS - The Real Reasons

The Big Idea

Discover how a tiny piece of code can save you hours of styling work!

The Scenario

Imagine you are styling a website and need to calculate colors or sizes repeatedly by hand for each element.

The Problem

Doing these calculations manually is slow and easy to make mistakes, especially when you want to change the design later.

The Solution

Custom functions let you write a small piece of reusable code to do these calculations automatically, saving time and avoiding errors.

Before vs After

✗ Before

$width: 100px;
$padding: 20px;
$full-width: $width + $padding + $padding;

✓ After

@function total-width($width, $padding) {
  @return $width + 2 * $padding;
}
$full-width: total-width(100px, 20px);

What It Enables

You can create smart, reusable style rules that adapt easily when your design changes.

Real Life Example

For example, a button's padding and size can be calculated once in a function, then used everywhere, so changing the button size updates all buttons instantly.

Key Takeaways

Manual calculations are slow and error-prone.

Custom functions automate and reuse calculations.

This makes your styles easier to maintain and update.