nex3/sass — Issue #252: Variables in @Media Queries in Dynamic Mixins Not Dynamic
Author: Snugug
Created: 2012-01-22 17:31:31+00:00
State: open

The easiest way to explain this is by code example. Imagine you have a list of break points and a respond-to mixin as follows:

$breaks: 320px, 480px, 560px, 720px, 1024px;

body {
@include respond-to(1) {
background: red;
}
@include respond-to(2) {
background: blue;
}
}

@mixin respond-to($size) {
$max-width: nth($breaks, $size);
@media screen and (min-width: $max-width) {
@content;
}
}

What winds up happening is that every media query $max-width winds up outputting as whatever the very last mixin call is (in this case, 480px). It looks something like this:

@media screen and (min-width: 480px) {
body {
background: red;
}
}
@media screen and (min-width: 480px) {
body {
background: blue;
}
}

I think, clearly, the expected result would be for the first media query would be 320px not 480px. While this example isn't the most useful of examples, it clearly illustrates the issue present.