Sass TutorialLesson 8Free preview

Sass @extend

This lesson is part of SASS · All levels

Summary

The @extend rule allows one selector to inherit the entire rule from another selector so that the rule is grouped into one list of selectors in the resulting CSS. This method is useful to avoid repeating the same style block. However, careful use is needed so that the final selector does not become too long and difficult to predict.

Key points

@extend makes the selector inherit all the properties of the other selector
The compilation results combine the selector with the comma mark
@extend only copies declarations, not special-purpose nested blocks
Alternative similar to the @placeholder function with a percentage prefix

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.