Esta pergunta já tem uma resposta aqui:

Estou usando o saas através da estrutura da bússola e da dependência da planta / grade. Quero poder definir a largura de uma coluna usando uma consulta de mídia, assim:

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

Este é compilado em /stylesheets/screen.css

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

Mas os valores no restante do screen.css não estão definidos adequadamente. Acho que faz sentido, uma vez que a variável $ blueprint-grid-width é lida em tempo de compilação, não em tempo de execuçã

Existe uma maneira de gerar um layout com diferentes larguras de grade usando uma consulta de mídia para obter a resolução da tel

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