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:

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;

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