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.