title: SCSS variable scope
body: <p>I'm in the process of converting a stylesheet from <em>LESS</em> to <em>SCSS</em> and I'm confused about something I'm seeing with variable scope. Reproduced with a simple example:</p>
  
  <pre><code>$my-color: #000;
  
  #logo {
      $my-color: #555;
      color: $my-color;
  }
  
  a {
      color: $my-color;
  }
  </code></pre>
  
  <p>Converts to the following CSS:</p>
  
  <pre><code>#logo {
      color: #555555;
  }
  
  a {
      color: #555555;
  }
  </code></pre>
  
  <p>The equivalent construction in <em>LESS</em> would result in the <code>a color</code> value being <code>#000</code> as the variable declaration within the <code>#logo</code> scope would override the more general one but only within that scope. Do variable scopes not work like that in <em>SCSS</em>? Is there a way to achieve the same thing?</p>