Mixin variable in @content block not working.

[opyate]

Reminds me of #239

Here's a test case:

@mixin media($size: false) {
  @if $size == desktop {
    @media (min-width: 800px){
      @content;
    }   
  } @else {
    @media (min-width: 400px){
      @content
    }   
  }
}

@mixin grid-column($width, $float: left, $device: tablet) {
  @include media($device) {
    float: $float; // <--------------------------------------------- ERROR HERE
    width: percentage($width);
  }
}

.column-quarter {
  @include grid-column(1/4);
}

I get the error:

SyntaxError: Undefined variable: '$float'.

[opyate]

For anyone seeing this, a workaround is using the Ruby SASS compiler. (an example)

[ghost]

Quoting Juan M Uys notifications@github.com:

For anyone seeing this, a workaround is using the Ruby SASS compiler. (an example)

Just curious: Why do you

RUN apt-get update -qq RUN apt-get update -qq && apt-get -y install rubygems RUN gem install sass

instead of just

RUN apt-get update -qq && apt-get -y install ruby-sass

?

[opyate]

@MartinBorg you're seeing the Git removed/added lines together (note the -/+ symbols in front of the lines). Look at the entire file at that version here: https://github.com/crossgovernmentservices/xgs_prototypes/blob/7d00578206993459078b20159e34fe510ec85ea8/Dockerfile

[ghost]

Quoting Juan M Uys notifications@github.com:

@MartinBorg you're seeing the Git removed/added lines. Look at the
entire file at that version here:
https://github.com/crossgovernmentservices/xgs_prototypes/blob/7d00578206993459078b20159e34fe510ec85ea8/Dockerfile

Yes, the question was more like: Why first install and use the "gem" command to install sass, when it is directly available in Debian via apt(-get)? Both ruby-sass and python-pyscss are in Debian stable.

[opyate]

@MartinBorg ah, I didn't notice apt-get install -y **ruby-sass** on the last line. No reason, really.

[alvra]

Here's a simpler example that triggers the bug. It seems the @content of a mixin doesn't resolve variables in the scope of the @include.

@mixin a {
    @content;
}

div {
    $bright_color: red;

    @include a {
        color: $bright_color;
    }
}

  File "python2.7/site-packages/scss/ast.py", line 346, in evaluate
    raise SyntaxError("Undefined variable: '%s'." % self.name)
scss.errors.SassEvaluationError: Error evaluating expression:
    $bright_color

on line 6 of /tmp/<stdin>
Traceback:
  File "python2.7/site-packages/scss/calculator.py", line 141, in evaluate_expression
    return ast.evaluate(self, divide=divide)
  File "python2.7/site-packages/scss/ast.py", line 346, in evaluate
    raise SyntaxError("Undefined variable: '%s'." % self.name)
SyntaxError: Undefined variable: '$bright_color'.

The sass reference docs are very clear on this.

The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin.

Changing the order of the variable definition in the example from the reference demonstrates the problem.

@mixin colors($color: blue) {
  @content;
  border-color: $color;
}
$color: white;  // moved from the top to here
.colors {
  @include colors { color: $color; }
}

Both color and border-color are blue, while the former should be white.

How can I help in getting this fixed?