Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="widget">
    <h3 class="widget--title">Archives by Date</h3>
    <ul class="widget--list">
        <li><a class="widget--link" href="#">October 2014</a></li>
        <li><a class="widget--link widget--link__selected" href="#">July 2014</a></li>
    </ul>
</div>
<div class="widget widget__alt">
    <h3 class="widget--title">Archives by Date Alt</h3>
    <ul class="widget--list">
        <li><a class="widget--link" href="#">October 2014</a></li>
        <li><a class="widget--link widget--link__selected" href="#">July 2014</a></li>
    </ul>
</div>

SassMeister-input.scss

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

// BEM: Block--element__modifier
.widget {
  
  // Elements
  &--title { color: blue; }
  
  &--list { margin-right: 0; }
  
  &--link { 
    text-transform: uppercase;
    color: grey; 
    
    // Modifiers
    &__selected { color: red; }
  }
  
  // Top-level Modifiers
  &__alt &--title { color: green; }
  
  &__alt &--link__selected { color: green; }
}

SassMeister-output.css

.widget--title {
  color: blue;
}
.widget--list {
  margin-right: 0;
}
.widget--link {
  text-transform: uppercase;
  color: grey;
}
.widget--link__selected {
  color: red;
}
.widget__alt .widget--title {
  color: green;
}
.widget__alt .widget--link__selected {
  color: green;
}

SassMeister-rendered.html

<div class="widget">
    <h3 class="widget--title">Archives by Date</h3>
    <ul class="widget--list">
        <li><a class="widget--link" href="#">October 2014</a></li>
        <li><a class="widget--link widget--link__selected" href="#">July 2014</a></li>
    </ul>
</div>
<div class="widget widget__alt">
    <h3 class="widget--title">Archives by Date Alt</h3>
    <ul class="widget--list">
        <li><a class="widget--link" href="#">October 2014</a></li>
        <li><a class="widget--link widget--link__selected" href="#">July 2014</a></li>
    </ul>
</div>