Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box">
  foo
</div>

<div class="panel">
  hai
</div>

<div class="widget">
  lolz
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

.box{
  margin: 20px;
  padding: 20px;
  max-width: 500px;
}

%bordered{
  border: 1px solid #ccc;
  border-radius: 5px;
}

%shadowed{
  box-shadow: 0 3px 4px #ccc;
}

%i-wont-be-output-unless-im-used{
  
}


.panel{
  @extend .box, %bordered, %shadowed;
}

.widget{
  @extend .box, %shadowed;
}

SassMeister-output.css

.box, .panel, .widget {
  margin: 20px;
  padding: 20px;
  max-width: 500px;
}

.panel {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.panel, .widget {
  box-shadow: 0 3px 4px #ccc;
}

SassMeister-rendered.html

<div class="box">
  foo
</div>

<div class="panel">
  hai
</div>

<div class="widget">
  lolz
</div>