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

Sass for Designers Example #9

// A few variables thrown in for good measure
$border-colour: #a4a4a4;
$unit: 10px;

@mixin subtle-shadow {
  -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);
}

@mixin shadow-border {
  @include subtle-shadow;
  border-bottom: $unit/10 solid $border-colour; /* Base unit divided by 10 = 1px */

  padding-bottom: $unit*2; /* Base unit multipled by 2 = 20px */ 
  margin-bottom: $unit*4; /* Base unit multipled by 4 = 40px */
}

article {
  @include shadow-border;
}

header {
  @include shadow-border;
}

p.intro {
  @include shadow-border;
}