Using of variables in media queries

[wordsq]

Unless I've done something wrong latest build seemed to have a problem accepting:

@media screen and (orientation:portrait) and (max-width:$ipad_portrait_width){
body {
width : $ipad_portrait_width;
}
}

while it worked perfectly with:

@media screen and (orientation:portrait) and (max-width:768px){
body {
width : $ipad_portrait_width;
}
}

Of course, easy to come around for now, but maybe can make it as a fix in a future revision ?
thanks

[Kronuz]

You should be able to use variables using the #{} syntax:

@media screen and (orientation:portrait) and (max-width:#{$ipad_portrait_width}) {
    body {
        width: $ipad_portrait_width; 
    }
}

[radiac]

Unfortunately that doesn't seem to work either, at least not in 1.1.3.

I had a quick dig through the source, and it looked like Scss.manage_children() might not be expecting anything complicated to be rule[MEDIA]?

The original SCSS doesn't support it at the moment either - testing it at http://sass-lang.com/try.html throws an error - but it looks like they'll be addressing it in their next release: sass/sass#46

[radiac]

SCSS supports this now - the following code works in http://sass-lang.com/try.html, but not pyScss yet:

$width: 940px;
body {
    @media all and (max-width:$width) {
       display:    none;
    }
}

The #{$width} syntax also works in SCSS but not pyScss.

[encukou]

Variables work for me, however expressions do not:

$width-maximum: 920px;
@media (min-width: $width-maximum + 20px) {
    body {
        width: $width-maximum;
    }
}

[eevee]

#{} should fix that, maybe, probably. I think @media blocks are treated very specially by Ruby (including some amount of parsing) and not quite as specially by us.

[clee704]

bootstrap-sass cannot be used with pyScss due to this exact problem.

[eevee]

@clee704: you mean due to missing support for variables, right, not for expressions? I only see plain variables used in bootstrap, and those will work in the impeding 1.2.