How to use SASS logic within a CSS 3 media query

Question

I'm using saas via the compass framework and the blueprint/grid dependency. I want to be able to set the width of a column using a media query, like so:

// /src/partials/_base.scss
$blueprint-grid-columns: 18;

@media screen and (max-width: 1024px){
    // If screen res is 1024 or lower, then set grid width to 46px
    $blueprint-grid-width: 46px;
}
@media screen and (max-width: 1280px){
    $blueprint-grid-width: 50px;
}
@media screen and (max-width: 1600px){
    $blueprint-grid-width: 76px;
}

$blueprint-grid-margin: 8px;

This compiles to in /stylesheets/screen.css:

@media screen and (max-width: 1024px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1600px) {}

But the values in the rest of screen.css are not set accordingly. I guess that makes sense, since the $blueprint-grid-width variable is read at compile time, not run time.

Is there a way to output a layout with different grid widths by using a media query to get screen resolution?

Related github issue:
https://github.com/chriseppstein/compass/issues/302

So far, the only solution I can think of is to compile 3 separate stylesheets - 1 for each screen resolution. Then copy and paste the output css into a stylesheet within the media queries. That sucks though. — Adam, Mar 16 '11 at 21:58
If I were more skilled with ruby, I would customize the compiler to do put the three stylesheets together into one. — Adam, Mar 16 '11 at 21:59

score 5 · Accepted Answer · answered May 05 '11 at 17:56

5

This was a bug in SASS. It's been fixed as of version 3.1.0:

http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#310

answered May 05 '11 at 17:56

Adam

12,236
9
39
44

1

I'm trying to do this myself and still can't figure it out. Could you point to which part of the changelog explicitly refers to this fix? Thanks! – sguha Apr 24 '12 at 23:01
Look where it says: @import may now be used within CSS or media rules. The imported file will be treated as though it were nested within the rule. Files with mixins may not be imported in nested contexts. Here's a link of how I do it now: http://jsfiddle.net/9bdRp/ – Adam Apr 26 '12 at 17:45

score 2 · Answer 2 · answered Mar 16 '11 at 21:23

I'm trying to figure out the same thing but there doesn't seem to be a good way to get this working the way I want it to. Like you said, the variables get set at compile time, not runtime so it's hard to figure. I think you could do something like this:

@media screen and (max-width: 1024px) {
    $blueprint-grid-width: 46px;
    @import 'blueprint';
    // do everything else you need to with this size
}

But then you'd have to do this same, brute force kind of reset of Blueprint for every media query you want to run.

When I try that I get the error: error src/screen.scss (Line 3: Import directives may only be used at the root of a document.) — Adam, Mar 16 '11 at 21:57

How to use SASS logic within a CSS 3 media query

2 Answers2

Linked