Why Mixin definition with @mixin in SASS? - Purpose & Use Cases

The Big Idea

What if you could fix a style once and see it change everywhere instantly?

The Scenario

Imagine you are styling a website and need to reuse the same button style on many pages. You copy and paste the same CSS code for each button.

The Problem

If you want to change the button style later, you must find and update every copy manually. This is slow and easy to miss some places, causing inconsistent styles.

The Solution

Using @mixin lets you write the button style once and reuse it everywhere by including the mixin. Change it once, and all buttons update automatically.

Before vs After

✗ Before

button {
  background: blue;
  color: white;
  padding: 1rem;
}

/* copied many times */

✓ After

@mixin button-style {
  background: blue;
  color: white;
  padding: 1rem;
}

button {
  @include button-style;
}

What It Enables

You can write styles once and reuse them easily, making your CSS cleaner and faster to update.

Real Life Example

A website with many buttons that all share the same look can use a mixin to keep their styles consistent and easy to maintain.

Key Takeaways

Manually copying styles causes errors and slow updates.

@mixin lets you define reusable style blocks.

Updating a mixin updates all places where it is used.