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;
}

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 :)