Skip to content

Instantly share code, notes, and snippets.

@CodeRecipez
Last active December 15, 2015 12:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeRecipez/5260775 to your computer and use it in GitHub Desktop.
Save CodeRecipez/5260775 to your computer and use it in GitHub Desktop.
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