Placeholder Classes

placeholders.scss

// SCSS for placeholder classes

%fancy-container {
  @include box-shadow(0 0 10px rgba(0,0,0,0.2));
  @include border-radius(4px);
  background: #eee;
  border: solid 1px #ddd;
}
%fancier-container {
  @include box-shadow(0 0 10px rgba(20,20,150,0.1));
  border-width: 2px;
}

#news {
  @extend %fancy-container;
}
#articles {
  @extend %fancy-container;
  @extend %fancier-container;
}


// This outputs CSS using the @extend rule. So whatever styles are inside that class get transfered to whatever you want.
#news, 
#articles {
  @include box-shadow(0 0 10px rgba(0,0,0,0.2));
  @include border-radius(4px);
  background: #eee;
  border: solid 1px #ddd;
}

#articles {
  @include box-shadow(0 0 10px rgba(20,20,150,0.1));
  border-width: 2px;
}