O'Reilly logo

Jump Start Sass by Miriam Suzanne, Hugo Giraudel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required