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

The Big Idea

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

The Scenario

Imagine you want to style many buttons on your website. You write the same color, padding, and border styles again and again for each button.

The Problem

If you change the padding or color later, you must find and update every button style manually. This wastes time and can cause mistakes or inconsistent styles.

The Solution

Mixins with parameters let you write a reusable style block once and customize it with different values. You call the mixin with different colors or sizes, and it applies the styles automatically.

Before vs After

✗ Before

button1 {
  color: white;
  padding: 10px;
}
button2 {
  color: black;
  padding: 5px;
}

✓ After

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

button1 {
  @include button-style(white, 10px);
}
button2 {
  @include button-style(black, 5px);
}

What It Enables

You can create flexible, consistent styles that are easy to update and reuse across your whole site.

Real Life Example

A website with many buttons that need different colors and sizes but share the same basic style can use mixins with parameters to keep code clean and fast to change.

Key Takeaways

Writing styles manually for each element is slow and error-prone.

Mixins with parameters let you reuse styles with custom values.

This makes your CSS easier to maintain and update.