Including mixins with @include in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

SASS

.box {
  [1] center-content;
}

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

A@import

B@mixin

C@extend

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using '@extend' which is for inheritance, not mixins.

Use '@include' to apply a mixin inside a selector in Sass.

2fill in blank

medium

Complete the code to include the mixin 'button-style' with parentheses inside '.btn'.

SASS

.btn {
  [1] button-style();
}

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

A@extend

B@include

C@mixin

D@import

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses when including a mixin that expects them.

Using '@mixin' which defines, not includes.

Use '@include' with parentheses to include a mixin, even if it has no parameters.

3fill in blank

hard

Fix the error in including the mixin 'shadow' inside '.card'.

SASS

.card {
  [1] shadow;
}

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

A@mixin

Binclude

C@include

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'include' without '@'.

Using '@mixin' which defines a mixin, not includes it.

The correct way to include a mixin is '@include' followed by the mixin name.

4fill in blank

hard

Fill both blanks to include the mixin 'flex-center' with a parameter 'column' inside '.container'.

SASS

.container {
  [1] flex-center([2]);
}

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

A@include

Brow

Ccolumn

D@mixin

Attempts:

3 left

💡 Hint

Common Mistakes

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

Passing 'row' instead of 'column' as the parameter.

Use '@include' to include the mixin and pass 'column' as the parameter inside parentheses.

5fill in blank

hard

Fill all three blanks to include the mixin 'text-style' with parameters 'italic' and 'bold' inside '.title'.

SASS

.title {
  [1] text-style([2], [3]);
}

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

A@mixin

Bitalic

Cbold

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

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

Swapping the order of parameters or missing the comma.

Use '@include' to apply the mixin and pass 'italic' and 'bold' as parameters inside parentheses separated by a comma.