@extend directive in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make .button inherit styles from .base using @extend.

SASS

.base {
  color: blue;
}

.button {
  [1] .base;
  background: white;
}

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

A@extend

B@import

C@mixin

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend

Forgetting the semicolon after @extend

Trying to use @mixin without defining one

The @extend directive allows .button to inherit styles from .base.

2fill in blank

medium

Complete the code to extend .alert styles in .error.

SASS

.alert {
  border: 1px solid red;
  padding: 1rem;
}

.error {
  [1] .alert;
  background-color: pink;
}

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

A@mixin

B@include

C@extend

D@import

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include without a mixin

Writing @extend without the selector

Missing the semicolon after @extend

@extend is used to inherit styles from .alert inside .error.

3fill in blank

hard

Fix the error by completing the code to extend .card styles in .profile-card.

SASS

.card {
  box-shadow: 0 0 5px gray;
  padding: 2rem;
}

.profile-card {
  [1] .card;
  border-radius: 0.5rem;
}

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

A@mixin

B@include

C@import

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the semicolon after @extend

Using @include instead of @extend

Not specifying the selector after @extend

The @extend directive must be followed by a selector and a semicolon to work correctly.

4fill in blank

hard

Fill both blanks to extend .base styles in .primary and add a color.

SASS

.base {
  font-size: 1rem;
  font-weight: bold;
}

.primary {
  [1] .base;
  color: [2];
}

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

A@extend

Bred

Cblue

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend

Choosing an invalid color value

Forgetting the semicolon after @extend

@extend .base; shares styles, and color: blue; sets the text color.

5fill in blank

hard

Fill all three blanks to create a class .highlight that extends .text, sets color, and font-weight.

SASS

.text {
  font-size: 1.2rem;
  font-weight: normal;
}

.highlight {
  [1] .text;
  color: [2];
  font-weight: [3];
}

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

A@include

Bred

Cbold

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend

Using invalid font-weight values

Forgetting semicolons

@extend .text; inherits styles, color: red; sets text color, and font-weight: bold; makes text bold.