Mixins with parameters in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS code with a mixin parameter?

Given the following SASS code, what CSS will be generated?

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

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

SASS

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

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

A

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

B

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

C

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

D

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

💡 Hint

Remember that CSS box-shadow values are space-separated, not comma-separated.

The mixin inserts the parameters as space-separated values for the box-shadow properties. Option B correctly shows the CSS output with proper units and spacing.

🧠 Conceptual

intermediate

What error occurs if a required mixin parameter is missing?

Consider this SASS mixin:

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

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

What happens when you compile this code?

SASS

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

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

A SASS compilation error: Missing argument for $radius.

B The border-radius property is set to 0 by default.

C The mixin is ignored and no CSS is generated for .box.

D The border-radius property is set to null.

💡 Hint

Think about what happens when a required parameter is not provided.

SASS requires all parameters without default values to be provided. Omitting $radius causes a compilation error.

❓ selector

advanced

Which CSS selector is generated by this SASS code using a mixin with parameters?

Given this SASS code:

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

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

.btn-secondary {
  @include button-style(gray);
}

Which CSS selectors appear in the output?

SASS

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

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

.btn-secondary {
  @include button-style(gray);
}

A .btn-primary .btn-secondary

B .btn-primary, .btn-secondary

C

.btn-primary
.btn-secondary

D .btn-primary .btn-secondary {}

💡 Hint

Look at how SASS outputs separate selectors for separate blocks.

SASS outputs separate CSS blocks for each selector. The selectors appear one after another, separated by a newline, not combined with commas or spaces.

❓ layout

advanced

How does this mixin with parameters affect layout spacing?

Analyze this SASS code:

@mixin spacing($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}

.card {
  @include spacing(1rem, 2rem, 1rem, 2rem);
}

What margin layout will the .card element have?

SASS

@mixin spacing($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}

.card {
  @include spacing(1rem, 2rem, 1rem, 2rem);
}

A Top and bottom margins 2rem; left and right margins 1rem

B All margins set to 1rem

C All margins set to 2rem

D Top and bottom margins 1rem; left and right margins 2rem

💡 Hint

Recall the order of margin properties in CSS: top, right, bottom, left.

The mixin sets each margin side individually using the parameters in the order top, right, bottom, left. The values passed match that order.

❓ accessibility

expert

Which mixin parameter usage best supports accessible focus styles?

You want to create a mixin that applies focus styles with customizable outline color and thickness for accessibility. Which SASS mixin usage produces the best accessible focus style?

@mixin focus-style($color, $thickness) {
  outline: $thickness solid $color;
  outline-offset: 2px;
}

.button {
  @include focus-style(blue, 3px);
}

SASS

@mixin focus-style($color, $thickness) {
  outline: $thickness solid $color;
  outline-offset: 2px;
}

.button {
  @include focus-style(blue, 3px);
}

A Outline thickness 3px solid blue with 2px offset, ensuring visible focus ring

B Outline thickness 1px solid blue with no offset, subtle focus ring

C No outline, only background color change on focus

D Outline thickness 5px dotted blue with 0 offset

💡 Hint

Good focus styles must be visible and clear for keyboard users.

Option A uses a solid outline with sufficient thickness and offset, making the focus ring clearly visible and accessible.

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