Why Default parameter values in SASS? - Purpose & Use Cases

The Big Idea

What if you could write one style and change its look anytime without rewriting code?

The Scenario

Imagine you are writing a style for buttons in Sass. You want to set colors, but sometimes you want the default color, and other times a special one.

The Problem

If you write separate styles for every color variation, you end up repeating lots of code. Changing the default means updating many places, which is slow and error-prone.

The Solution

Default parameter values let you write one style with a color parameter that has a default. You only change the color when needed, keeping code clean and easy to update.

Before vs After

✗ Before

$color: blue;
.button {
  background: $color;
}

// To change color, redefine $color before each use

✓ After

@mixin button($color: blue) {
  background-color: $color;
}

.button { @include button(); }
.special-button { @include button(red); }

What It Enables

This lets you create flexible, reusable styles that adapt easily without rewriting or duplicating code.

Real Life Example

Think of a website with many buttons: some blue, some red, some green. Using default parameters, you write one button style and just change the color when needed.

Key Takeaways

Default parameters reduce repeated code.

They make styles easier to maintain and update.

They allow flexible, reusable design components.