Generated by SassMeister.com.

SassMeister-input-HTML.html

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

<div id="some-module">
  <p class="disabled">I should be green</p>
  <p class="sometimes-special">sometimes special, but parent says no :-(</p>
  <p class="never-special">never special</p>
  
  <directive xx-picky>
    <p class="disabled">I want to be red, but I can't</p>
  </directive>
  
  <directive xx-indecisive>
    <p>i don't want to have to decide my color</p>
  </directive>
</div>

SassMeister-input.scss

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

$color: #666;

h3 {
  color: $color;
}

#some-module {
  // I am always special
  .disabled {
    $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: red;
  
  .disabled {
    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;
}

SassMeister-output.css

h3 {
  color: #666;
}

#some-module .disabled {
  color: green;
}

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

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

[xx-picky] .disabled {
  color: red;
}

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

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

SassMeister-rendered.html

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

<div id="some-module">
  <p class="disabled">I should be green</p>
  <p class="sometimes-special">sometimes special, but parent says no :-(</p>
  <p class="never-special">never special</p>
  
  <directive xx-picky>
    <p class="disabled">I want to be red, but I can't</p>
  </directive>
  
  <directive xx-indecisive>
    <p>i don't want to have to decide my color</p>
  </directive>
</div>