O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

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

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

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