@extend: Think Class Hierarchy, but for CSS!

This is Part 4 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”

@extend is a new feature that came to be in the latest release of Sass (Sass 3 as of writing). @extend feels like a complex concept at first, but if you are at all familiar with the Class Inheritance design pattern in computer science, you’ll feel at home very quickly.

Hopefully, if you are using Sass, you are taking advantage of the Sass mixin capabilities to keep your stylesheets encapsulated and consistent. But, if you’ve been using mixins a lot, you may have come to realize that in many cases, mixins end up making your code quite verbose, when its compiled down to CSS. Here is a common usage pattern for mixins in Sass:

=my-base-class
  font-weight: bold
  font-size: 12px
  +box-shadow(#fff, 0px, 1px, 0px)


#subclass-1
  +my-base-class

#subclass-2
  +my-base-class

#nested
  #subclass-3
    +my-base-class

which becomes the following CSS:

#subclass-1 {
  font-weight: bold;
  font-size: 12px;
  -moz-box-shadow: white 0px 1px 0px;
  -webkit-box-shadow: white 0px 1px 0px;
  -o-box-shadow: white 0px 1px 0px;
  box-shadow: white 0px 1px 0px;
}

#subclass-2 {
  font-weight: bold;
  font-size: 12px;
  -moz-box-shadow: white 0px 1px 0px;
  -webkit-box-shadow: white 0px 1px 0px;
  -o-box-shadow: white 0px 1px 0px;
  box-shadow: white 0px 1px 0px;
}

#nested #subclass-3 {
  font-weight: bold;
  font-size: 12px;
  -moz-box-shadow: white 0px 1px 0px;
  -webkit-box-shadow: white 0px 1px 0px;
  -o-box-shadow: white 0px 1px 0px;
  box-shadow: white 0px 1px 0px;
}

This might be a little confusing at first, but the ultimate change is this: You are not defining a mixin or any other sort of special sass-oriented convention, you are simply defining a CSS class-based selector, and using the @extend keyword to associate your other selectors with that class-based selector. Why repeat the mixin n-number of times in your codebase? @extend lets you declare your properties in one place, adhering to encapsulation, but completely cuts down on the redundancy/verbosity factor of conventional mixins.

@import "compass/css3"

.my-base-class
  font-weight: normal
  font-size: 12px
  +box-shadow(#fff, 0px, 1px, 0px)

.my-base-class:hover
  font-weight: bold

.nested .my-base-class
  color: blue

#subclass-1
  @extend .my-base-class

#subclass-2
  @extend .my-base-class

#nested
  #subclass-3
    @extend .my-base-class

will produce the following CSS:

.my-base-class, #subclass-1, #subclass-2, #nested #subclass-3 {
  font-weight: normal;
  font-size: 12px;
  -moz-box-shadow: white 0px 1px 0px;
  -webkit-box-shadow: white 0px 1px 0px;
  -o-box-shadow: white 0px 1px 0px;
  box-shadow: white 0px 1px 0px; }

.my-base-class:hover, #subclass-1:hover, #subclass-2:hover, #nested #subclass-3:hover {
  font-weight: bold; }

.nested .my-base-class, .nested #subclass-1, .nested #subclass-2, .nested #nested #subclass-3, #nested .nested #subclass-3 {
  color: blue; }

@extend is a very very powerful feature of Sass 3, and I think we have not even begun to scratch the surface with what it can do. What sorts of ideas do you have for @extend?

Perezium

@extend: Think Class Hierarchy, but for CSS!

Latest Tweets