title: Dynamically change a variable based on class name
body: <p>Assume I have something like this:</p>
  
  <pre><code>.object {
    $primary-color: blue;
    h1 {
      font-size: 40px;
      color: $primary-color; 
    }
    p {
      font-size: 20px;
      color: $primary-color; 
    }
  }
  </code></pre>
  
  <p>Now I'll be having a blue object. But let's say I want to make the same object but in a red color, it might be intuitive to write</p>
  
  <pre><code>.object red {
    $primary-color: red;
  }
  </code></pre>
  
  <p>and expect all the $primary-color to change to red, but this is not valid in SCSS. What I have to write is:</p>
  
  <pre><code>.object red {
    $primary-color: red;
    h1 { color: $primary-color; }
    p { color: $primary-color; }
  }
  </code></pre>
  
  <p>If I do it this way, I can still keep the 40px font size in h1 and 20px in p and will change all colors to red. However, once my code gets bigger, this will become harder and harder to maintain.</p>
  
  <p>Does SCSS provide any tool to make this task more modular and maintainable?</p>