Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Selector inheritance w/@extend

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML.

The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector. For example:

selector_inheritance_w_extend.scss

For more information and examples as to how the @extend directive works, be sure to read Sass Extends: be aware of the loop.

SassMeister Gist

h1 {
font-size: 3.83333em;
line-height: 1.17391em;
margin-bottom: 0.3913em;
font-weight: normal;
font-fmaily: "Helvetica Neue", Arial, sans-serif;
text-decoration: uppercase;
}
h2 {
font-size: 2.66667;
line-height: 1.125;
margin-bottom: 0.5625;
@extend h1;
}
.large-copy {
@extend h1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment