Cacher is the code snippet organizer for pro developers

<h3>Closer to a real use case</h3>

<div id="some-module">
  <p class="always-special">always special</p>
  <p class="sometimes-special">sometimes special, but parent says no :-(</p>
  <p class="never-special">never special</p>
  
  <directive xx-picky>
    <p>even nested inside this module, I choose my own colors!</p>
  </directive>
  
  <directive xx-indecisive>
    <p>i don't want to have to decide my color</p>
  </directive>
</div>

h3 {
  color: #666;
}

#some-module .always-special {
  color: green;
}

#some-module .sometimes-special {
  color: #666;
}

#some-module .never-special {
  color: #666;
}

[xx-picky] p {
  color: green;
}

[xx-indecisive] p {
  color: #666;
}

directive {
  border: 1px solid #ccc;
  display: block;
  margin: 5px;
  padding: 5px;
}

// ----
// libsass (v3.2.5)
// ----

$color: #666;

h3 {
  color: $color;
}

#some-module {
  // I am always special
  .always-special {
    $color: green;
    color: $color;
  }
  
  // I am special only if my parent allows it
  .sometimes-special {
    $color: green !default;
    color: $color;
  }
  
  // I am never special
  .never-special {
    color: $color;
  }
}

// Even nested inside modules, I choose my own color
[xx-picky] {
  $xx-color: green;
  
  p {
    color: $xx-color;
  }
}

// I don't want to have to decide my color
[xx-indecisive] {
  p {
    color: $color;
  }
}

directive {
  border: 1px solid #ccc;
  display: block;
  margin: 5px;
  padding: 5px;
}

<h3>Closer to a real use case</h3>

<div id="some-module">
  <p class="always-special">always special</p>
  <p class="sometimes-special">sometimes special, but parent says no :-(</p>
  <p class="never-special">never special</p>
  
  <directive xx-picky>
    <p>even nested inside this module, I choose my own colors!</p>
  </directive>
  
  <directive xx-indecisive>
    <p>i don't want to have to decide my color</p>
  </directive>
</div>