How to use SASS logic in CSS 3 media query

Question

I use saas through compass infrastructure and project / grid dependency. I want to set the column width using a media query, for example:

// /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; 

Compiled 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 appropriately. I assume this makes sense since the $ blueprint-grid-width variable is read at compile time, not the run time.

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

Github related issue:
https://github.com/chriseppstein/compass/issues/302

Answer 1

It was a mistake in SASS. It has been fixed since version 3.1.0:

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

Answer 2

I am trying to understand the same thing, but there seems to be no good way to make this work the way I want it to. As you said, variables are set at compile time, not at runtime, so it's hard to understand. 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 will need to do the same, brute force reset for Blueprint for each media request that you want to run.