Chained extensions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the .button style in .primary-button.

SASS

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

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

A.btn

B.primary

C.button

D.link

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name that does not exist like .primary or .btn

Forgetting the dot before the class name

Using @include instead of @extend

The @extend directive is used to inherit styles from another selector. Here, .primary-button extends .button to reuse its styles.

2fill in blank

medium

Complete the code to chain extensions so .alert-button inherits from .button and .alert.

SASS

.alert-button {
  @extend [1];
  @extend .alert;
  color: red;
}

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

A.button

B.alert-button

C.alert

D.primary-button

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .alert twice

Extending .alert-button inside itself

Using @include instead of @extend

To chain extensions, you extend multiple classes. Here, .alert-button extends .button and .alert to combine their styles.

3fill in blank

hard

Fix the error in the chained extension by completing the missing class to extend.

SASS

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

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

A.alert

B.primary

C.button

D.success

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .alert instead of .success

Extending .button twice

Forgetting the dot before the class name

The .success-button should extend .success and .button to combine success styles with button styles.

4fill in blank

hard

Fill both blanks to chain extensions so .warning-button inherits from .button and .warning.

SASS

.warning-button {
  @extend [1];
  @extend [2];
  border: 1px solid orange;
}

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

A.button

B.alert

C.warning

D.primary

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .alert instead of .warning

Extending .primary instead of .button

Using the same class twice

The .warning-button extends both .button and .warning to combine their styles.

5fill in blank

hard

Fill all three blanks to chain extensions so .custom-button inherits from .button, .alert, and .custom.

SASS

.custom-button {
  @extend [1];
  @extend [2];
  @extend [3];
  font-weight: bold;
}

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

A.button

B.alert

C.custom

D.primary

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .primary instead of .custom

Repeating the same class twice

Forgetting the dot before class names

The .custom-button extends .button, .alert, and .custom to combine all these styles.