Unbound variable inside mixin is looked up in global scope; should be local scope

[Quuxplusone]

In Sass 3.4.5 (Selective Steve) on Mac OS X, the following code:

@mixin foo() { bar: $bar; }

$bar: 1;
a {
  $bar: 2;
  @include foo();
  baz: $bar;
}

compiles to a { bar: 1; baz: 2; }.

The current version of Gabriele Cirulli's 2048 expects it to produce a { bar: 2; baz: 2; } — and that seems like the most reasonable behavior to me as well.

I don't know which version of Sass Cirulli was using to compile his original "main.scss", but you can easily verify that re-compiling "main.scss" with 3.4.5 produces a bunch of unwanted git diffs. I infer that this is a bug in Sass 3.4.5 that was introduced recently.

[nex3]

This isn't about how the variable is looked up, it's about how it's assigned. Sass 3.4 changed the variable semantics so that any variable declared in a nested scope (here within a CSS rule) shadows the global variable with the same name rather than assigning to it. This is so that $bar: 2 does the same thing no matter what global variables have been defined in other files that have been imported.

To assign to the global variable, all you have to do is explicitly use the !global flag. For example:

@mixin foo() { bar: $bar; }

$bar: 1;
a {
  $bar: 2 !global;
  @include foo();
  baz: $bar;
}

This compiles to a {bar: 2; bar: 2}.

[Quuxplusone]

Aha. Makes sense; thank you. Is there a simple way to write the code that would work with Sass 3.3 and with 3.4, other than refactoring the mixin to take $bar as a parameter?

[nex3]

Sass 3.3 is able to parse the !global flag, so the code above should work with it.