Using extended selectors

If you are a follower of OOCSS, extending selectors should feel very natural to you. Much like mixins, Sass' @extends directive is a great tool for creating and managing repeated code. Unlike mixins, extends do not accept arguments and do not inject code where called. Instead, an extended selector will be modified in it's place of origin within the cascade by appending the extending selector.

In the following example I created the selector of .default_gray_border . In the following selector .promoters_box I extended .default_gray_border using the @extend directive.

// Style class object
.default_gray_border {
  @include border-radius(25px);
  border: 1px solid gray;
}
// Semantically named class
.promoters_box {
  @extend .default_gray_border;
}

You will see in the following output CSS that Sass concatenated the two selectors together as these selectors share the exact same CSS rules.

// Output CSS
.default_gray_border, .promoters_box {  // notice the chained selectors
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  border: 1px solid gray;
}

When working with extends, I follow the same placement rules as with mixins as the consistent placement of extends will increase readability of the code. In the following example the extended selector is listed directly after the declared selector and then parent specific styled follow.

.foo {
  @extend .default-transition;
  background-color: orange;
  width: 50%;
}