Variable arguments in mixins in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS mixin usage?

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

@mixin box-shadow($shadows...) {
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.box {
  @include box-shadow(2px 2px 5px #333, inset 0 0 10px #666);
}

SASS

@mixin box-shadow($shadows...) {
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.box {
  @include box-shadow(2px 2px 5px #333, inset 0 0 10px #666);
}

A

.box {
  -webkit-box-shadow: 2px 2px 5px #333, inset 0 0 10px #666;
  box-shadow: 2px 2px 5px #333, inset 0 0 10px #666;
}

B

.box {
  -webkit-box-shadow: (2px 2px 5px #333, inset 0 0 10px #666);
  box-shadow: (2px 2px 5px #333, inset 0 0 10px #666);
}

C

.box {
  -webkit-box-shadow: 2px 2px 5px #333 inset 0 0 10px #666;
  box-shadow: 2px 2px 5px #333 inset 0 0 10px #666;
}

D

.box {
  -webkit-box-shadow: 2px 2px 5px #333;
  box-shadow: inset 0 0 10px #666;
}

💡 Hint

Remember that variable arguments in SASS are treated as a list and when used directly, they are joined by commas.

The variable argument $shadows... collects all passed arguments as a list. When used directly in properties, the list items are joined by commas, producing multiple shadows separated by commas in CSS.

🧠 Conceptual

intermediate

What type is the variable argument inside a SASS mixin?

In SASS, when you define a mixin with variable arguments like $args..., what type does $args have inside the mixin?

A A list containing all passed arguments

B A string concatenation of all arguments

C A map with keys as argument positions

D A single value of the first argument only

💡 Hint

Think about how SASS collects multiple arguments passed to a mixin.

Variable arguments in SASS mixins are collected as a list. This allows you to iterate or join them as needed.

❓ selector

advanced

Which option correctly applies variable arguments in a nested selector?

Consider this SASS mixin that applies multiple colors as shadows. Which option correctly uses variable arguments to apply all shadows inside a nested selector?

@mixin multi-shadow($shadows...) {
  .shadowed {
    box-shadow: $shadows;
  }
}

SASS

@mixin multi-shadow($shadows...) {
  .shadowed {
    box-shadow: $shadows;
  }
}

A @include multi-shadow(1px, 1px, 2px, black, 0, 0, 5px, red);

B @include multi-shadow((1px 1px 2px black, 0 0 5px red));

C @include multi-shadow(1px 1px 2px black 0 0 5px red);

D @include multi-shadow(1px 1px 2px black, 0 0 5px red);

💡 Hint

Variable arguments accept multiple comma-separated values.

Option D passes two separate shadow values separated by a comma, which matches the variable argument syntax. Option D passes a single list as one argument, which is not unpacked. Option D misses commas, causing syntax error. Option D passes too many separate arguments that do not form valid shadows.

❓ layout

advanced

What CSS layout is produced by this SASS mixin with variable arguments?

Given this SASS mixin that sets multiple margin values using variable arguments, what is the resulting CSS?

@mixin set-margins($values...) {
  margin: $values;
}

.box {
  @include set-margins(1rem, 2rem, 3rem, 4rem);
}

SASS

@mixin set-margins($values...) {
  margin: $values;
}

.box {
  @include set-margins(1rem, 2rem, 3rem, 4rem);
}

A

.box {
  margin: 1rem, 2rem, 3rem, 4rem;
}

B

.box {
  margin: 1rem 2rem 3rem 4rem;
}

C

.box {
  margin: (1rem 2rem 3rem 4rem);
}

D

.box {
  margin: 1rem;
  margin: 2rem;
  margin: 3rem;
  margin: 4rem;
}

💡 Hint

CSS margin property expects space-separated values, not commas.

SASS variable arguments are joined by commas by default, but CSS margin expects space-separated values. SASS automatically converts the list to space-separated values when used in margin property, so the output is margin: 1rem 2rem 3rem 4rem; without commas.

❓ accessibility

expert

How can variable arguments in SASS mixins help improve accessibility in responsive design?

You want to create a SASS mixin that accepts any number of padding values for different screen sizes to improve spacing for accessibility. Which approach best uses variable arguments to achieve this?

A Use variable arguments but apply only the first value for all screen sizes to keep it simple.

B Use fixed padding values inside the mixin and ignore variable arguments for consistency.

C Use a variable argument to accept multiple padding values and apply them inside media queries for different breakpoints.

D Avoid variable arguments and write separate mixins for each screen size.

💡 Hint

Think about how variable arguments can handle flexible input for multiple cases.

Variable arguments allow passing any number of padding values. Inside the mixin, you can loop through these values and apply them to different media queries, making the design responsive and accessible by adjusting spacing per screen size.