Avoiding selector bloat from @extend in SASS - Interactive Code 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;
}

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

Abutton-base

B#btn-base

Cbtn-base

D.btn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dot before the class name.

Using an ID selector (#) instead of a class selector (.)

Use the class selector '.btn-base' with @extend to inherit styles properly.

2fill in blank

medium

Complete the code to avoid selector bloat by using a placeholder selector.

SASS

%btn-base {
  padding: 1rem;
  border-radius: 0.5rem;
}

.btn-secondary {
  @extend [1];
  background-color: gray;
}

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

A.btn-base

B%btn-base

C#btn-base

Dbtn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to extend a class selector instead of a placeholder.

Using an ID selector or no prefix at all.

Using a placeholder selector (%btn-base) with @extend avoids generating extra CSS selectors.

3fill in blank

hard

Fix the error in the code to prevent selector bloat when extending multiple selectors.

SASS

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

.error {
  @extend [1];
  color: red;
}

.warning {
  @extend [1];
  color: orange;
}

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

A%alert

B.alert

C#alert

Dalert

Attempts:

3 left

💡 Hint

Common Mistakes

Extending a class selector multiple times causing selector bloat.

Using an ID selector or no prefix.

Using a placeholder selector (%alert) prevents generating multiple .alert selectors and reduces CSS size.

4fill in blank

hard

Fill both blanks to create a placeholder and extend it correctly to avoid selector bloat.

SASS

[1] {
  font-weight: bold;
  text-transform: uppercase;
}

.btn-danger {
  @extend [2];
  background-color: red;
}

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

A%btn-base

B.btn-base

C%btn-danger

D.btn-danger

Attempts:

3 left

💡 Hint

Common Mistakes

Defining a class instead of a placeholder.

Extending a different selector than defined.

Define a placeholder %btn-base and extend it in .btn-danger to share styles without extra selectors.

5fill in blank

hard

Fill all three blanks to create a placeholder, extend it, and add a modifier class without selector bloat.

SASS

[1] {
  display: inline-block;
  padding: 0.5rem 1rem;
}

.btn {
  @extend [2];
  background-color: green;
}

.btn--large {
  @extend [3];
  font-size: 1.5rem;
}

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

A%button-base

B%btn-base

D.btn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Using different placeholder names for extends.

Extending a class selector instead of a placeholder.

Define a placeholder %button-base and extend it in both .btn and .btn--large to share styles efficiently.