Why mixins eliminate duplication in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin named 'center' that centers content using flexbox.

SASS

@mixin [1] {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Amiddle

Bflex-center

Calign-center

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that doesn't clearly describe the mixin's purpose.

Using spaces or invalid characters in the mixin name.

The mixin is named 'center' to clearly describe its purpose of centering content.

2fill in blank

medium

Complete the code to include the 'center' mixin inside the '.box' class.

SASS

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  @include [1];
}

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

Aflex-center

Bcenter

Calign-center

Dmiddle

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong mixin name.

Forgetting to use '@include' before the mixin name.

To use the mixin named 'center', you write '@include center;'.

3fill in blank

hard

Fix the error in the mixin usage by completing the blank.

SASS

.container {
  @include [1];
  padding: 1rem;
}

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

Acenter

Bcenter()

Ccentered

Dcentered()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses when the mixin has no parameters.

Using a wrong mixin name.

Mixins are included without parentheses if they have no parameters, so '@include center;' is correct.

4fill in blank

hard

Fill both blanks to create a mixin 'box-style' that sets width and background color.

SASS

@mixin box-style($width, $color) {
  width: [1];
  background-color: [2];
}

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

A$width

B$color

Cwidth

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of parameter variables.

Forgetting the $ sign before parameter names.

The mixin uses parameters $width and $color to set the width and background color properties.

5fill in blank

hard

Fill all three blanks to include 'box-style' mixin with width 300px and color coral inside '.card'.

SASS

.card {
  @include box-style([1], [2]);
  padding: [3];
}

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

A300px

Bcoral

C1rem

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping width and color values.

Using invalid units for padding.

The mixin is called with '300px' for width and 'coral' for color. Padding is set to '1rem' for spacing.