Example of rules based on design patterns in CSS made into a Sass mixin and applied to HTML elements

Sass for Designers Example #8

@mixin shadow-border {
  border-bottom: 1px solid #a4a4a4; 
  
  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

article {
  @include shadow-border;
}

header {
  @include shadow-border;
}

p.intro {
  @include shadow-border;
}

UPDATE: I was a bit off in this comment, so make sure you read the one after as well to get the full picture of what I'm on about.

Hello :)

As of SASS 3.2 (I think) we now have access to @extend, which is kind of like @include, but a little smarter than that. Whereas this example will result in three chunks of CSS with the mixin-included styles inside, using @extend instead of @include will combine the selectors to minimise repetition of generated styles.

Best of all, it can be combined with other styles, and SASS is smart enough to extract the @extend-ed mixins and create seperate chunks of CSS for those, so this:

article {
  @extend shadow-border;
  background: #ccc;
}

header {
  @extend shadow-border;
  border: 1px dashed #999;
}

p.intro {
  @extend shadow-border;
  font-size: 22px;
}

will result in this:

article, header, p.intro {
  border-bottom: 1px solid #a4a4a4; 

  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

article {
  background: #ccc;
}

header {
  border: 1px dashed #999;
}

p.intro {
  font-size: 22px;
}

Give it a go - I can see this being particularly handy with a clearfix mixin. Previously I'd have the same clearfix rules applied in tons of places in my generated CSS. @extend will create one bit of CSS with all the relevant selectors :)

Nifty, eh?

I don't think LESS has this functionality, so this is one very good reason to use SASS over LESS.

Right, turns out I was wrong. I was getting confused between mixins and placeholder selectors. SO instead of that mixin you'd have this:

%shadow-border {
  border-bottom: 1px solid #a4a4a4; 

  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

Note the % - wherever this appears in your document (and therefore the cascade) is where the extended styles will appear. The method of extending things is the same though - except you need to reference the placeholder:

article {
  @extend %shadow-border;
}

That does what I said in the previous comment. Have a read of Chris Eppstein's post about the release of 3.2: http://chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released/ - the bit about placeholder selectors is the first heading after the intro :)