gistfile1.scss

@mixin page-heading() {
  // Page headers include a background texture refactored into a reusable mixin
  @include background-texture();
  background: purple;
  font-size: 16px;
}

@mixin primary-heading() {
  color: red;
  font-size: 24px;
}

@mixin secondary-heading() {
  color: blue;
  font-size: 18px;
}

// Sensible default page styles
h1 {
  @include page-heading();
}

h2 {
  @include primary-heading();
}

// Now if the features page is a special case we can override the styles and an
// h1 suddenly has the reusable styles of a primary heading and no longer
// serves as a page heading
.features h1 {
  @include primary-heading();
}


.features h2 {
  @include secondary-heading();
}