Mixin definition with @mixin in SASS - Interactive Code Practice

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'

Acenter

Bflex-center

Calign-center

Dmiddle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that does not match the instruction.

Forgetting to use '@mixin' keyword.

The mixin is named 'center' as per the instruction. The '@mixin' keyword defines it.

2fill in blank

medium

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

SASS

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

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

Ainclude

B@mixin

C@include

Dmixin

Attempts:

3 left

💡 Hint

Common Mistakes

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

Omitting the '@' symbol.

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

3fill in blank

hard

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

SASS

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

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

Ainclude

B@mixin

C@include

Dmixin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mixin' without '@'.

Using '@include' which is for applying mixins.

The correct keyword to define a mixin is '@mixin'.

4fill in blank

hard

Fill both blanks to define a mixin named 'rounded' that sets border-radius to 1rem.

SASS

@[1] [2] {
  border-radius: 1rem;
}

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

Amixin

Binclude

Crounded

Dradius

Attempts:

3 left

💡 Hint

Common Mistakes

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

Choosing a mixin name unrelated to the style.

The '@mixin' keyword defines the mixin, and 'rounded' is the mixin name.

5fill in blank

hard

Fill all three blanks to apply the 'rounded' mixin inside a '.button' rule and add a background color.

SASS

.button {
  [1] rounded;
  background-color: [2];
  padding: [3];
}

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

A@include

Bblue

C1rem

Dborder-radius

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using invalid color names or missing units for padding.

Use '@include' to apply the mixin, set background-color to 'blue', and padding to '1rem'.