Esta pregunta ya tiene una respuesta aquí:

Estoy usando saas a través del marco de brújula y la dependencia de blueprint / grid. Quiero poder establecer el ancho de una columna usando una consulta de medios, 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 se compila en /stylesheets/screen.css

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

Pero los valores en el resto de screen.css no están configurados 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 generar un diseño con diferentes anchos de cuadrícula utilizando una consulta de medios para obtener la resolución de pantalla?

Problema relacionado con github:
https: //github.com/chriseppstein/compass/issues/30