Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// --- atoms
// tiny, reusable elements of a style that modules
// can extend. They should function like variables.
// @issue 
// changes here effect all of the modules that have
// extended them.

%widget-border {
  border-width:1px;
  border-style: solid;
  border-color: blue;
}

%widget-rounding {
  border-radius:6px;
}

// --- modules
// a base unit of organizing/namespacing reusable styles.
.widget-foo {
  @extend %widget-border;
  @extend %widget-rounding;
  color: blue;
}

.widget-bar {
  @extend %widget-border;  
  @extend %widget-rounding;
  color:red;
}

// module component
// sub-items that make up a "module"
// uses "bem flavored" <module>__<component> syntax
.widget-bar__title {
  font-weight:bold;
}

// --- revisions
// also using "bem" style syntax
// @issue
// it'd be awesome to use @extend
// here, and only have one class to on an item
// but... that would only give us one "hook" for styling
// (what if we wanted all .widget-bar modules contained within
// another module to be a certain way?)

// 1. SMACSS way
// do not use @extend
// and put the onus on the markup
// e.g. <div class="widget-bar widget-bar--silly">I'm silly</div>
.widget-bar--silly {
  font-family: comic-sans;
}

// 2. The sassy way
// one class per "module"
// <div class="widget-bar--sleek">I'm sleek</div>
.widget-bar--sleek {
  @extend .widget-bar;
  font-family: "Helvetica Neue", sans-serif;
}

// revised component
.widget-bar__title--loud {
  text-transform: uppercase;
}


// --- dangers
// @extending outside of classes
.profile {
  // but what if the design of widget bar changes?
  // now our profile, and any of it's extensions 
  // are tied to widget-bar's styles
  @extend .widget-bar;
  background: blue;
}
// repetition
// (because everything is modular and namespaced, there's a chance that
// duplication may actually *increase*)
.column {
  // should this be in an atom?
  // or should this be attached to the class
  border-radius: 6px;
  background: red;
}
.article {
  // fear of this changing
  // makes me want to stick this in its seperate class
  // even though it could be made into an atom / module
  border-radius: 6px;
  background:blue;
}

SassMeister-output.css

.widget-foo, .widget-bar, .widget-bar--sleek, .profile {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

.widget-foo, .widget-bar, .widget-bar--sleek, .profile {
  border-radius: 6px;
}

.widget-foo {
  color: blue;
}

.widget-bar, .widget-bar--sleek, .profile {
  color: red;
}

.widget-bar__title {
  font-weight: bold;
}

.widget-bar--silly {
  font-family: comic-sans;
}

.widget-bar--sleek {
  font-family: "Helvetica Neue", sans-serif;
}

.widget-bar__title--loud {
  text-transform: uppercase;
}

.profile {
  background: blue;
}

.column {
  border-radius: 6px;
  background: red;
}

.article {
  border-radius: 6px;
  background: blue;
}