Why advanced mixins solve complex problems in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple mixin that sets the text color.

SASS

@mixin text-color($color) {
  color: [1];
}

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

A$text

Bcolor

C$color

Dfont-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'color' instead of '$color' inside the mixin.

Forgetting the dollar sign before the parameter name.

The mixin uses the parameter $color to set the CSS color property. So, inside the mixin, we use $color to apply the passed color value.

2fill in blank

medium

Complete the code to include the mixin inside a CSS rule.

SASS

.button {
  [1] text-color(blue);
}

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

A@include

B@use

C@mixin

D@import

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@mixin' instead of '@include' to call the mixin.

Using '@import' or '@use' which are for loading files.

To use a mixin inside a CSS rule, you write '@include' followed by the mixin name and arguments.

3fill in blank

hard

Fix the error in the mixin call to pass the correct argument.

SASS

.alert {
  @include text-color([1]);
}

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

A$red

B'red'

Ccolor: red

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Passing color names without quotes causing undefined variable errors.

Using variable syntax ($red) without defining the variable.

When passing a color name as a string argument to a mixin, you must put it in quotes like 'red'. Without quotes, Sass treats it as a variable.

4fill in blank

hard

Fill both blanks to create a mixin that sets padding and margin with default values.

SASS

@mixin spacing($padding: 1rem, [1]: 2rem) {
  padding: $padding;
  [2]: $margin;
}

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

Amargin

Cpadding

Dmargin-top

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'padding' instead of 'margin' for the second parameter.

Forgetting the dollar sign before the parameter name.

The mixin defines a parameter $margin with default 2rem. Inside, it sets the CSS margin property to $margin.

5fill in blank

hard

Fill all three blanks to create a mixin that applies a box shadow with customizable color, blur, and spread.

SASS

@mixin box-shadow($color: black, $blur: 5px, [1]: 0px) {
  box-shadow: 0 0 [2] [3] $color;
}

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

Aspread

B$blur

C$spread

Dblur

Attempts:

3 left

💡 Hint

Common Mistakes

Using parameter names without dollar signs.

Mixing up the order of blur and spread in box-shadow.

The mixin uses $spread as the third parameter. The box-shadow property uses $blur and $spread variables in the correct order.