Mixins with parameters in SASS - Mini Project: Build & Apply

Using Mixins with Parameters in Sass

📖 Scenario: You are designing a simple website and want to reuse a button style with different colors. Instead of writing the same CSS multiple times, you will use a Sass mixin with parameters to create buttons with different background colors.

🎯 Goal: Create a Sass mixin named button-style that accepts a $color parameter. Use this mixin to style two buttons with different background colors.

📋 What You'll Learn

Create a mixin named button-style with a $color parameter

The mixin should set the background color to $color, text color to white, padding to 1rem 2rem, and border-radius to 0.5rem

Use the mixin to style a button with class .btn-primary with background color #007bff

Use the mixin to style a button with class .btn-success with background color #28a745

💡 Why This Matters

🌍 Real World

Mixins with parameters are used in real projects to write reusable, customizable styles that save time and reduce errors.

💼 Career

Knowing how to write and use Sass mixins with parameters is a valuable skill for front-end developers working on scalable CSS codebases.

1

Create the button-style mixin with a $color parameter

Write a Sass mixin named button-style that takes one parameter called $color. Inside the mixin, set background-color to $color, color to white, padding to 1rem 2rem, and border-radius to 0.5rem.

SASS

// Your code here

Hint

Use @mixin to define a mixin and include the parameter $color in parentheses.

2

Style the .btn-primary button using the mixin with color #007bff

Write a CSS rule for the class .btn-primary. Inside it, include the button-style mixin with the argument #007bff.

SASS

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

.btn-primary {
  // Your code here
}

Hint

Use @include followed by the mixin name and the color argument inside parentheses.

3

Style the .btn-success button using the mixin with color #28a745

Write a CSS rule for the class .btn-success. Inside it, include the button-style mixin with the argument #28a745.

SASS

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

.btn-primary {
  @include button-style(#007bff);
}

.btn-success {
  // Your code here
}

Hint

Repeat the same pattern as for .btn-primary, but use the color #28a745.

4

Add a hover effect to both buttons using the mixin with a darker color

Inside both .btn-primary and .btn-success rules, add a :hover selector. Use the button-style mixin with #0056b3 for .btn-primary:hover and #1e7e34 for .btn-success:hover.

SASS

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

.btn-primary {
  @include button-style(#007bff);

  &:hover {
    // Your code here
  }
}

.btn-success {
  @include button-style(#28a745);

  &:hover {
    // Your code here
  }
}

Hint

Use the nested &:hover selector inside each button class and include the mixin with the darker color.

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