SCSS variable scope

Question

I'm in the process of converting a stylesheet from LESS to SCSS and I'm confused about something I'm seeing with variable scope. Reproduced with a simple example:

$my-color: #000;

#logo {
    $my-color: #555;
    color: $my-color;
}

a {
    color: $my-color;
}

Converts to the following CSS:

#logo {
    color: #555555;
}

a {
    color: #555555;
}

The equivalent construction in LESS would result in the a color value being #000 as the variable declaration within the #logo scope would override the more general one but only within that scope. Do variable scopes not work like that in SCSS? Is there a way to achieve the same thing?

Answer 1

This is no longer the case at least as of SCSS v3.4.12:

Now it scopes correctly the variables:

Input:

$my-color: #000;

#logo {
    $my-color: #555;
    color: $my-color;
}

a {
    color: $my-color;
}

Output:

#logo {
  color: #555;
}

a {
  color: #000;
}

Can be tried out in: http://sassmeister.com/