| 15 | Keeping It Semantic: @extend |
Keeping things semantic is a philosophy where everything is named logically. We name items based on what they do, not what they look like. We don’t want to name something .blue_button; we want to name it .checkout_button, which is far more useful when we’re going through the code.
But what if you had a set of attributes—say a blue button—that needed to be applied to multiple buttons with different functions? You want to name the buttons after their function, but it would be a pain typing out the set of attributes over and over again.
This is where @extend comes in. @extend clones the attributes from one class or ID and adds them to another. Let’s run with the example we had with the blue button. Say we want to ...
Get Pragmatic Guide to 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.
