Why Functions with parameters in SASS? - Purpose & Use Cases

The Big Idea

What if you could change all your button styles by updating just one place?

The Scenario

Imagine you are styling buttons on a website. You want each button to have a different color and size, so you write separate styles for each one manually.

The Problem

If you want to change the button style later, you must update every single style manually. This takes a lot of time and can cause mistakes or inconsistencies.

The Solution

Functions with parameters let you create one reusable style that changes based on the input you give. You write the style once and just pass different values to get different results.

Before vs After

✗ Before

$btn-red-color: #f00;
$btn-red-size: 1.2rem;

.button-red {
  color: $btn-red-color;
  font-size: $btn-red-size;
}

.button-blue {
  color: #00f;
  font-size: 1rem;
}

✓ After

@mixin button-style($color, $size) {
  color: $color;
  font-size: $size;
}

.button-red {
  @include button-style(#f00, 1.2rem);
}

.button-blue {
  @include button-style(#00f, 1rem);
}

What It Enables

You can create flexible, reusable styles that adapt easily by just changing the input values.

Real Life Example

Think about a website with many buttons: primary, secondary, disabled. Instead of writing separate styles for each, you write one function and pass different colors and sizes to style them all consistently.

Key Takeaways

Manual styling for each variation is slow and error-prone.

Functions with parameters let you reuse code with different inputs.

This makes your styles easier to maintain and update.