Extending vs mixing comparison in SASS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base button style.

SASS

.btn-primary {
  @extend [1];
  background-color: blue;
  color: white;
}

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

A.btn-base

B.btn-primary

C@mixin btn-base

D#btn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Using @mixin name with @extend instead of selector.

Including '#' or other symbols in the selector name.

The @extend directive uses a selector like '.btn-base' to inherit styles.

2fill in blank

medium

Complete the code to include the button mixin.

SASS

.btn-secondary {
  [1] btn-base;
  background-color: gray;
  color: black;
}

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

A@extend

B@mixin

C@include

D@use

Attempts:

3 left

💡 Hint

Common Mistakes

Using @extend instead of @include for mixins.

Confusing @mixin declaration with usage.

The @include directive is used to insert mixin styles into a selector.

3fill in blank

hard

Fix the error in the code to properly extend the base card style.

SASS

.card-special {
  @extend [1];
  border-color: red;
}

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

A#card-base

B.card-base

C@mixin card-base

Dcard-base

Attempts:

3 left

💡 Hint

Common Mistakes

Using ID selector (#card-base) with @extend.

Using mixin name instead of selector.

The @extend directive requires a class selector like '.card-base' to work correctly.

4fill in blank

hard

Fill both blanks to create a mixin and include it in a class.

SASS

@mixin [1] {
  padding: 1rem;
  border-radius: 0.5rem;
}

.card-rounded {
  [2] [1];
  background-color: white;
}

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

Arounded-style

B@include

C@extend

Dcard-rounded

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@extend' instead of '@include' to use a mixin.

Mismatching mixin name between definition and usage.

Define the mixin named 'rounded-style' and include it with '@include rounded-style'.

5fill in blank

hard

Fill all three blanks to create a reusable button style with parameters and include it.

SASS

@mixin [1]($bg-color, $text-color) {
  background-color: [2];
  color: [3];
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
}

.btn-custom {
  @include [1](green, white);
}

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

Abutton-style

B$bg-color

C$text-color

Dbtn-custom

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter names inside the mixin body.

Forgetting to use parameters for colors.

Define mixin 'button-style' with parameters $bg-color and $text-color, then use them inside the mixin.