Why Including mixins with @include 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 want to style many buttons on your website with the same shadow, border, and padding. You write the same CSS rules over and over for each button.

The Problem

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

The Solution

Mixins let you write a group of styles once and reuse them anywhere by including them with @include. Change the mixin once, and all buttons update automatically.

Before vs After

✗ Before

button1 {
  box-shadow: 2px 2px 5px gray;
  border-radius: 5px;
  padding: 10px;
}
button2 {
  box-shadow: 2px 2px 5px gray;
  border-radius: 5px;
  padding: 10px;
}

✓ After

@mixin button-style {
  box-shadow: 2px 2px 5px gray;
  border-radius: 5px;
  padding: 10px;
}
button1 {
  @include button-style;
}
button2 {
  @include button-style;
}

What It Enables

You can keep your styles neat, update them quickly, and avoid repeating code everywhere.

Real Life Example

A website with many buttons, cards, or alerts that share the same look can use mixins to keep styles consistent and easy to maintain.

Key Takeaways

Writing styles once and reusing them saves time.

Mixins with @include help avoid mistakes from repeated code.

Updating a mixin updates all places it is included automatically.