Mixin libraries pattern in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin named 'center' that centers content horizontally and vertically.

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

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-descriptive mixin name.

Forgetting to use '@mixin' keyword.

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

2fill in blank

medium

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

SASS

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

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

Aflex-center

Bcenter

Cmiddle

Dalign

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong mixin name.

Omitting the '@include' keyword.

To use a mixin, you write '@include' followed by the mixin's name, which is 'center' here.

3fill in blank

hard

Fix the error in the mixin definition by completing the missing keyword.

SASS

@[1] border-radius($radius) {
  border-radius: $radius;
}

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

Amixin

Binclude

Cdefine

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@include' instead of '@mixin' to define.

Using 'function' keyword which is not valid in Sass.

The correct keyword to define a mixin is '@mixin'. The '@' is implied here, so 'mixin' is the keyword after '@'.

4fill in blank

hard

Fill both blanks to create a mixin that accepts a color and applies it as background and text color.

SASS

@mixin color-scheme($bg, $text) {
  background-color: [1];
  color: [2];
}

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

A$bg

B$text

Cbackground-color

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of variables.

Mixing up $bg and $text variables.

The mixin uses parameters $bg and $text. These variables are used to set background-color and color respectively.

5fill in blank

hard

Fill all three blanks to create a map of mixins and use a conditional to include one based on a variable.

SASS

$themes: (
  dark: [1],
  light: [2]
);

$selected-theme: dark;

@if map-has-key($themes, $selected-theme) {
  @include map-get($themes, [3]);
}

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

Adark-theme

Blight-theme

C$selected-theme

Dtheme

Attempts:

3 left

💡 Hint

Common Mistakes

Using string keys instead of mixin names in the map.

Using wrong variable to get the mixin.

The map keys are 'dark' and 'light' with mixin names 'dark-theme' and 'light-theme'. The variable $selected-theme is used to get the correct mixin.