Chapter 7The @extend Directive

Welcome to the most powerful, dangerous, and controversial feature in the Sass language! The @extend directive is one way to handle inheritance in Sass. The goal is to represent a relationship between two items, where one is a category and the other is an object within that category—sometimes called an “is-a” relationship. Hugo is a developer, Chewbacca is a Wookie, and a warning is a message.

Building Clear Relationships

In order to understand the purpose of @extend, let’s start with some plain CSS for a message style, and then more specific info and warning message variations. In our brilliantly designed fantasy, the default message style will give us a basic gray box, while the info and warning variations add ...

Get Jump Start Sass now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.