Cómo usar la lógica de SASS dentro de una consulta de medios de CSS 3

Question

Estoy usando saas a través de la brújula y la dependencia de blueprint/grid. Quiero ser capaz de establecer el ancho de una columna mediante una consulta de los medios de comunicación, así:

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

Esto compila en /stylesheets/screen.css:

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

Sin embargo, los valores de la el resto de screen.css no se establece en consecuencia. Supongo que tiene sentido, ya que la variable $ blueprint-grid-width se lee en tiempo de compilación, no en tiempo de ejecución.

¿Hay alguna forma de mostrar un diseño con diferentes anchos de cuadrícula mediante una consulta de medios para obtener una resolución de pantalla?

respecto de la emisión de github:
https://github.com/chriseppstein/compass/issues/302

Answer 1

Esto fue un error en SASS. Se ha fijado partir de la versión 3.1.0:

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

Answer 2

que estoy tratando de averiguar lo mismo, pero no parece ser una buena manera de conseguir este trabajo de la manera que quiero que haga. Como dijo, las variables se configuran en tiempo de compilación, no en tiempo de ejecución, por lo que es difícil de entender. Creo que se podría hacer algo como esto:

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

Pero entonces tendría que hacer este mismo tipo, la fuerza bruta de puesta a cero del Proyecto para cada consulta de medios que desea ejecutar.