Variable arguments in mixins in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin that accepts any number of arguments.

SASS

@mixin example([1]) {
  color: red;
}

Drag options to blanks, or click blank then click option'

A$args[]

B$args

C$args...

D$args()

Attempts:

3 left

💡 Hint

Common Mistakes

Using $args without ... does not collect multiple arguments.

Using square brackets or parentheses is invalid syntax for variable arguments.

In Sass, to accept variable arguments in a mixin, you use the syntax $args... which collects all arguments into a list.

2fill in blank

medium

Complete the code to loop through all arguments passed to the mixin.

SASS

@mixin colors($colors...) {
  @each $color in [1] {
    color: $color;
  }
}

Drag options to blanks, or click blank then click option'

A$colors

B$colors...

C$color

D$colors[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using $colors... inside the loop is incorrect syntax.

Trying to loop over $color instead of $colors.

The variable $colors holds all arguments as a list, so you loop through $colors directly.

3fill in blank

hard

Fix the error in the mixin call to pass multiple colors.

SASS

@include colors([1]);

Drag options to blanks, or click blank then click option'

A(red, blue, green)

Bred, blue, green

C"red, blue, green"

Dred blue green

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses makes Sass treat it as one argument (a list).

Using quotes passes a single string argument.

Separating by spaces only is invalid.

When passing multiple arguments to a mixin, separate them by commas without parentheses or quotes.

4fill in blank

hard

Fill both blanks to create a mixin that applies multiple padding values.

SASS

@mixin padding([1]) {
  padding: [2];
}

Drag options to blanks, or click blank then click option'

A$values...

B$values

Cpadding

Dpadding: $values

Attempts:

3 left

💡 Hint

Common Mistakes

Using $values without ... in the parameter list.

Trying to write 'padding: $values' inside the property value.

Use $values... to accept variable arguments, and use $values directly to apply them as padding values.

5fill in blank

hard

Fill all three blanks to create a mixin that sets multiple font properties from variable arguments.

SASS

@mixin font-settings([1]) {
  font-family: [2];
  font-size: [3];
}

Drag options to blanks, or click blank then click option'

A$settings...

Bnth($settings, 1)

Cnth($settings, 2)

D$settings

Attempts:

3 left

💡 Hint

Common Mistakes

Using $settings without ... in the parameter list.

Trying to use $settings directly without nth() to access individual values.

Use $settings... to accept variable arguments, then use nth() to access each argument by position.

Practice

1. What does using ...$args in a Sass mixin allow you to do?

easy

A. Automatically convert arguments to strings

B. Limit the mixin to only one argument

C. Accept any number of arguments as a list inside the mixin

D. Prevent the mixin from accepting arguments

Solution

1. Step 1: Understand the ...$args syntax

   This syntax in Sass mixins means the mixin can take any number of arguments, which are collected into a list named $args.

2. Step 2: Recognize the flexibility it provides

   Because the arguments are stored as a list, you can use them inside the mixin to apply styles dynamically based on how many arguments are passed.

3. Final Answer:

   Accept any number of arguments as a list inside the mixin -> Option C

4. Quick Check:

   Variable arguments = flexible input list [OK]

Hint: Look for ...$args to accept many inputs [OK]

Common Mistakes:

• Thinking it limits to one argument
• Assuming arguments become strings automatically
• Believing it disables arguments

2. Which of the following is the correct way to define a Sass mixin that accepts variable arguments?

easy

A. @mixin example($args...) { /* code */ }

B. @mixin example(...$args) { /* code */ }

C. @mixin example(args...) { /* code */ }

D. @mixin example($args..) { /* code */ }

Solution

1. Step 1: Recall Sass syntax for variable arguments

   In Sass, the correct syntax to accept variable arguments in a mixin is to place three dots after the argument name: $args....

2. Step 2: Identify the correct option

   @mixin example($args...) { /* code */ } correctly uses $args... inside the mixin definition, which is the valid Sass syntax.

3. Final Answer:

   @mixin example($args...) { /* code */ } -> Option A

4. Quick Check:

   Variable args syntax = $args... [OK]

Hint: Remember: dots come after variable name, no parentheses [OK]

Common Mistakes:

• Putting dots before the variable name
• Using parentheses incorrectly
• Confusing with JavaScript rest syntax

3. Given the Sass mixin:

@mixin colors($colors...) {
  @each $color in $colors {
    .text-#{$color} {
      color: $color;
    }
  }
}

What CSS will be generated by:

@include colors(red, blue, green);

medium

A. .text-red { color: red; } .text-blue { color: blue; } .text-green { color: green; }

B. .text-red, .text-blue, .text-green { color: red, blue, green; }

C. .text-red { color: red; } .text-blue { color: blue; }

D. Syntax error due to incorrect argument usage

Solution

1. Step 1: Understand the mixin behavior

   The mixin takes variable arguments as a list $colors. It loops over each color and creates a CSS class with the color name and sets the text color.

2. Step 2: Apply the mixin with three colors

   When called with red, blue, green, it generates three classes: .text-red, .text-blue, and .text-green, each with the corresponding color style.

3. Final Answer:

   .text-red { color: red; } .text-blue { color: blue; } .text-green { color: green; } -> Option A

4. Quick Check:

   Loop over args creates separate classes [OK]

Hint: Variable args loop creates one style per argument [OK]

Common Mistakes:

• Combining all colors in one selector
• Missing the loop causing only one class
• Syntax errors from wrong argument usage

4. What allows this Sass mixin that uses variable arguments to output valid CSS padding values?

@mixin padding($values...) {
  padding: $values;
}

When used as @include padding(10px, 20px);, it outputs valid CSS padding values.

medium

A. The mixin must use @each to apply padding multiple times

B. Variable arguments can be used with padding property

C. The mixin should use parentheses around $values

D. You must join the list into a space-separated string before using

Solution

1. Step 1: Identify how variable arguments are stored

   Variable arguments are collected into a space-separated list. padding: $values; serializes the list with spaces, producing valid CSS for shorthand properties like padding.

2. Step 2: No additional processing needed

   The mixin must use @each to apply padding multiple times adds unnecessary loop; C adds unneeded parens; D manual join is redundant since the list is already space-separated.

3. Final Answer:

   Variable arguments can be used with padding property -> Option B

4. Quick Check:

   Var args list = space-separated for shorthands [OK]

Hint: Variable args work directly with shorthand CSS properties [OK]

Common Mistakes:

• Thinking @each is required for multiple values
• Believing parentheses are needed around $values
• Assuming manual string joining is necessary

5. You want a Sass mixin that accepts any number of margin values and applies them correctly. Which mixin code correctly handles 1 to 4 arguments using variable arguments and outputs valid CSS?

hard

A. @mixin margin($values...) {
margin: #{join($values, ' ')};
}

B. @mixin margin($values...) {
margin: unquote($values);
}

C. @mixin margin($values...) {
@each $val in $values {
margin: $val;
}
}

D. @mixin margin($values...) {
margin: $values;
}

Solution

1. Step 1: Understand the need for space-separated values

   Variable arguments form a space-separated list, ideal for CSS shorthand properties like margin.

2. Step 2: Evaluate each option

   A uses incorrect join argument order (requires join(' ', $values)); B correctly uses margin: $values; for space-separated output; C loops creating multiple margin rules (invalid); D misuses unquote on list.

3. Final Answer:

   @mixin margin($values...) { margin: $values; } -> Option D

4. Quick Check:

   Direct $values for shorthand properties [OK]

Hint: Directly assign $args... to shorthand properties [OK]

Common Mistakes:

• Reversing arguments in list.join()
• Looping and repeating CSS property
• Using unquote() on argument lists