Why extending reduces duplication in SASS - Test Your Understanding

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-primary

B.btn-secondary

C.btn

D.btn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the same class (.btn-primary) causes no effect.

Using a non-existent class name.

Forgetting the dot before the class name.

Using @extend with .btn-base copies its styles into .btn-primary, reducing repeated code.

2fill in blank

medium

Complete the code to extend multiple classes.

SASS

.alert-success {
  @extend [1];
  @extend .alert;
  background-color: green;
}

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

A.alert-base

B.alert-danger

C.alert-warning

D.alert-success

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the same class twice.

Using unrelated alert classes.

Missing the dot before the class name.

Extending .alert-base and .alert combines their styles, avoiding duplication.

3fill in blank

hard

Fix the error in the extend statement to reduce duplication.

SASS

.card-header {
  @extend [1];
  font-weight: bold;
}

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

A#card-base

Bcard-base

C.card-base

DcardBase

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dot before the class name.

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

Using camelCase instead of kebab-case.

Class names must start with a dot when used with @extend to correctly reference the selector.

4fill in blank

hard

Fill both blanks to create a reusable card style and extend it.

SASS

[1] {
  padding: 1rem;
  border: 1px solid #ccc;
}
.card-footer {
  @extend [2];
  font-size: 0.9rem;
  color: #666;
}

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

A.card-base

B.card-footer

D.card-header

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the wrong class.

Forgetting the dot in class names.

Defining the base style without a class selector.

Defining .card-base and extending it in .card-footer reduces repeated padding and border styles.

5fill in blank

hard

Fill all three blanks to extend base button styles with modifiers.

SASS

.btn-base {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}
.btn-primary {
  @extend [1];
  background-color: [2];
  color: [3];
}

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

A.btn-base

Bblue

Cwhite

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Not extending the base button class.

Using incorrect color names.

Mixing up background and text colors.

Extending .btn-base shares common button styles, while setting specific colors for .btn-primary reduces duplication.