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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access