how I used to write sass --> how i write it now.

progress.sass

// how I used to write sass!
// -----------------------
// its short, sure, but short doesn't necessarily mean simple. Its very difficult for me
// to tell how a given element gets its styles -- element-1 is getting inherited styles 
// from its container, and then has two different explicit selectors. At scale, 
// its even harder to tell what overrides what, and file ordering begins to actually 
// matter. Whenever I see code like this now, I refactor it asap -- before 
// it gets too unwieldy and brittle to change. 
.container-element
  font: 15px verdana
  color: $text-blue
  @include clearfix

  .element-1, .element-2, .element-3
    border-color: $border-red
    border-width: 4px
    padding: 32px

  .element-1
    border-color: $border-black

  .element-2
    background-color: $black
    color: $text-grey


// how I write sass now!
// ---------------------
// its longer, sure, and will take milliseconds longer to load as the compiled
// css will include a fair amount of duplication. But IMO I have a much better sense
// where my styles are coming from, and how each element is styled. If I need to override
// styles, I can do it within a selector, and not worry about specificity at all. 
// the process of modularizing my css into helpers (and potentially into more 
// complicated abstractions) tends to reveal other forms of duplication, which 
// in the long run seems to make my css files shorter. 
=callout-styling
  font: 15px verdana
  color: $text-blue
  border-color: $border-red
  border-width: 4px

=three-columns
  float: left
  margin-right: 15px
  padding: 32px

  &:last-child
    margin-right: 0

=contained-element
  +three-columns
  +callout-element
  
.container-element
  @include clearfix

.contained-element-1
  +contained-element
  border-color: $border-black

.contained-element-2
  +contained-element
  background-color: $black
  color: $text-grey

.contained-element-3
  +contained-element