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.