Mixins with parameters in SASS

Introduction

Mixins with parameters let you reuse styles but change details each time. This saves time and keeps your code neat.

You want to create buttons with different colors but the same shape.

You need to apply a shadow effect with different sizes on various elements.

You want to set different font sizes but keep the same font style.

You want to reuse a layout style but change spacing for different sections.

Syntax

SASS

@mixin name($param1, $param2) {
  property: $param1;
  property: $param2;
}

.selector {
  @include name(value1, value2);
}

Use @mixin to define reusable style blocks with parameters.

Use @include to apply the mixin and pass values.

Examples

This mixin sets background color for buttons. You pass the color when including it.

SASS

@mixin button($bg-color) {
  background-color: $bg-color;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

.btn-primary {
  @include button(blue);
}

.btn-danger {
  @include button(red);
}

This mixin creates a shadow with parameters for position, blur, and color.

SASS

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0.5rem, 0.5rem, 1rem, rgba(0,0,0,0.3));
}

Sample Program

This example shows a mixin that sets text color and size. We use it for a title and a subtitle with different colors and sizes.

SASS

@charset "UTF-8";

@mixin colored-text($color, $size) {
  color: $color;
  font-size: $size;
  font-weight: bold;
}

.title {
  @include colored-text(#2a9d8f, 2rem);
}

.subtitle {
  @include colored-text(#e76f51, 1.5rem);
}

Important Notes

Parameters make mixins flexible and powerful.

You can set default values for parameters like $color: black to make them optional.

Mixins help avoid repeating the same code with small changes.

Summary

Mixins with parameters let you reuse styles but customize them.

Use @mixin to create and @include to apply with values.

This keeps your styles clean, consistent, and easy to update.

Practice

1. What is the main purpose of using @mixin with parameters in Sass?

easy

A. To create reusable styles that can be customized with different values

B. To define variables that store colors and fonts

C. To import external CSS files into Sass

D. To write plain CSS without any dynamic features

Solution

1. Step 1: Understand what @mixin does

   @mixin lets you write a block of styles once and reuse it multiple times.

2. Step 2: Recognize the role of parameters

   Parameters allow you to customize the reused styles by passing different values when including the mixin.

3. Final Answer:

   To create reusable styles that can be customized with different values -> Option A

4. Quick Check:

   Mixins with parameters = reusable customizable styles [OK]

Hint: Mixins reuse styles; parameters customize them [OK]

Common Mistakes:

• Confusing mixins with variables
• Thinking mixins import files
• Believing mixins are plain CSS blocks

2. Which of the following is the correct syntax to define a mixin with a parameter named color?

easy

A. @mixin button($color) { color: $color; }

B. @mixin button { color: color; }

C. @mixin button(color) { color: color; }

D. @mixin button[$color] { color: $color; }

Solution

1. Step 1: Check the mixin declaration syntax

   The correct way to declare a mixin with parameters uses parentheses and a dollar sign before the parameter name.

2. Step 2: Verify the parameter usage inside the mixin

   The parameter $color must be used with a dollar sign to refer to its value.

3. Final Answer:

   @mixin button($color) { color: $color; } -> Option A

4. Quick Check:

   Mixin params use ($param) and $param inside [OK]

Hint: Parameters need $ and parentheses in @mixin [OK]

Common Mistakes:

• Omitting $ before parameter name
• Using square brackets instead of parentheses
• Not using $ when referencing parameter inside mixin

3. Given the Sass code:

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.button {
  @include box-shadow(2px, 4px, 6px, rgba(0,0,0,0.3));
}

What CSS will be generated for the .button class?

medium

A. .button { box-shadow: 2px, 4px, 6px, rgba(0,0,0,0.3); }

B. .button { box-shadow: $x $y $blur $color; }

C. .button { box-shadow: 2px 4px 6px rgba(0,0,0,0.3); }

D. .button { box-shadow: 2 4 6 rgba(0,0,0,0.3); }

Solution

1. Step 1: Understand mixin parameter substitution

   The mixin replaces each parameter with the passed value when included.

2. Step 2: Check the CSS output format

   The values are inserted without commas, matching CSS syntax for box-shadow.

3. Final Answer:

   .button { box-shadow: 2px 4px 6px rgba(0,0,0,0.3); } -> Option C

4. Quick Check:

   Mixin params replaced correctly in CSS [OK]

Hint: Mixin params replace placeholders without commas [OK]

Common Mistakes:

• Leaving parameter names as literals in output
• Adding commas between values in CSS
• Omitting units like px

4. Identify the error in this Sass code:

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

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

medium

A. Parameters cannot have units like px

B. Incorrect mixin name

C. Wrong syntax for @include

D. Missing $ before radius inside mixin

Solution

1. Step 1: Check parameter usage inside mixin

   The parameter $radius must be referenced with a dollar sign inside the mixin body.

2. Step 2: Identify the error in property value

   The code uses radius without $, so it is treated as a literal string, causing wrong CSS.

3. Final Answer:

   Missing $ before radius inside mixin -> Option D

4. Quick Check:

   Parameter references need $ inside mixin [OK]

Hint: Always use $ when referencing parameters inside mixin [OK]

Common Mistakes:

• Forgetting $ before parameter names
• Misusing @include syntax
• Thinking units are not allowed in parameters

5. You want to create a mixin responsive-text that sets font size differently for mobile and desktop. It takes two parameters: $mobile-size and $desktop-size. Which Sass code correctly applies the font sizes using a media query inside the mixin?

hard

A. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $desktop-size;
@media (max-width: 768px) {
font-size: $mobile-size;
}
}

B. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $mobile-size;
@media (min-width: 768px) {
font-size: $desktop-size;
}
}

C. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $mobile-size;
@media (max-width: 768px) {
font-size: $desktop-size;
}
}

D. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $desktop-size;
@media (min-width: 768px) {
font-size: $mobile-size;
}
}

Solution

1. Step 1: Understand mobile-first approach

   Set the base font size for mobile first, then override for larger screens using min-width media query.

2. Step 2: Check parameter usage and media query logic

   The mixin sets font-size: $mobile-size; outside media query, then inside @media (min-width: 768px) sets font-size: $desktop-size;.

3. Final Answer:

   @mixin responsive-text($mobile-size, $desktop-size) { font-size: $mobile-size; @media (min-width: 768px) { font-size: $desktop-size; } } -> Option B

4. Quick Check:

   Mobile first base, desktop override with min-width [OK]

Hint: Mobile first: base size outside, desktop inside min-width [OK]

Common Mistakes:

• Using max-width instead of min-width for desktop
• Swapping mobile and desktop sizes
• Placing media query outside mixin