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.

Practice

1. What does the @include directive do in Sass?

easy

A. It inserts the styles defined in a mixin into the current selector.

B. It defines a new mixin with reusable styles.

C. It imports another Sass file into the current file.

D. It creates a variable to store a color or value.

Solution

1. Step 1: Understand the role of @include

   The @include directive is used to add the styles from a mixin into a selector.

2. Step 2: Differentiate from other Sass features

   Defining mixins uses @mixin, importing files uses @import, and variables use $ syntax.

3. Final Answer:

   It inserts the styles defined in a mixin into the current selector. -> Option A

4. Quick Check:

   @include adds mixin styles [OK]

Hint: Remember: @include adds mixin styles inside selectors [OK]

Common Mistakes:

• Confusing @include with @mixin which defines mixins
• Thinking @include imports files
• Mixing up variables with mixins

2. Which of the following is the correct syntax to include a mixin named button-style in Sass?

easy

A. @include button-style();

B. @mixin button-style();

C. @include button-style;

D. @use button-style();

Solution

1. Step 1: Recall the syntax for including mixins

   The correct syntax to include a mixin is @include mixin-name(); with parentheses even if no arguments are passed.

2. Step 2: Eliminate incorrect options

   @mixin defines a mixin, not includes it. @use is for modules. Omitting parentheses is invalid syntax.

3. Final Answer:

   @include button-style(); -> Option A

4. Quick Check:

   Include mixin with @include name() [OK]

Hint: Use @include mixinName() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses after mixin name
• Using @mixin instead of @include to call mixin
• Confusing @use with @include

3. Given the Sass code:

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
  background: blue;
}

What CSS will this produce?

medium

A. .box { border-radius: 10; background: blue; }

B. .box { border-radius: $radius; background: blue; }

C. .box { border-radius: 10px; background: blue; }

D. .box { background: blue; }

Solution

1. Step 1: Understand mixin with argument

   The mixin border-radius takes a parameter $radius and sets border-radius to that value.

2. Step 2: Apply mixin with 10px argument

   Including @include border-radius(10px); replaces $radius with 10px in the output CSS.

3. Final Answer:

   .box { border-radius: 10px; background: blue; } -> Option C

4. Quick Check:

   Mixin argument replaces variable in output [OK]

Hint: Mixin arguments replace variables inside mixin [OK]

Common Mistakes:

• Leaving variable name $radius in output CSS
• Omitting units like px in argument
• Ignoring mixin styles in output

4. Identify the error in this Sass code:

@mixin text-style {
  font-size: 1.2rem;
  color: black;
}

.title {
  @include text-style;
  font-weight: bold;
}

medium

A. Cannot use @include inside a selector.

B. Mixin should be defined with parentheses even if no arguments.

C. Mixin name should start with $ sign.

D. Missing parentheses after mixin name in @include.

Solution

1. Step 1: Check @include syntax

   When including a mixin, parentheses are required even if no arguments are passed.

2. Step 2: Verify other parts

   Mixin definition without parentheses is allowed if no arguments. Mixin names do not start with $. @include is valid inside selectors.

3. Final Answer:

   Missing parentheses after mixin name in @include. -> Option D

4. Quick Check:

   @include needs parentheses even if empty [OK]

Hint: Always add () after mixin name in @include [OK]

Common Mistakes:

• Omitting parentheses in @include
• Thinking mixin names start with $
• Believing @include can't be inside selectors

5. You want to create a reusable mixin card that sets a white background, shadow, and border radius. You also want to customize the border radius when including it. Which Sass code correctly defines and uses this mixin?

hard

A. @mixin card {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card(1rem);
}

B. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card(1rem);
}

C. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 1rem;
}

.container {
@include card;
}

D. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card;
}

Solution

1. Step 1: Define mixin with parameter for border radius

   The mixin card must accept $radius to customize border radius.

2. Step 2: Include mixin with argument

   When including, pass the desired radius value like @include card(1rem);.

3. Step 3: Check other options for errors

   @mixin card { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card(1rem); } uses $radius without parameter, causing error. @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 1rem; } .container { @include card; } hardcodes radius and omits parentheses in include. @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card; } omits argument when including.

4. Final Answer:

   @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card(1rem); } -> Option B

5. Quick Check:

   Define mixin with param, include with argument [OK]

Hint: Define mixin params and pass args in @include [OK]

Common Mistakes:

• Using variables inside mixin without parameters
• Forgetting parentheses in @include
• Not passing required arguments when including