Comment utiliser la logique SASS dans un CSS 3 requête média [double]

Question

Cette question a déjà une réponse ici:

• Utilisation des variables Sass avec CSS3 médias Requêtes 6 réponses

J'utilise saas via le cadre de la boussole et la dépendance plan / grille. Je veux être en mesure de définir la largeur d'une colonne à l'aide d'une requête de médias, comme suit:

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

Cette compiles à /stylesheets/screen.css dans:

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

Mais les valeurs dans le reste de screen.css ne sont pas fixés en conséquence. Je suppose que cela est logique, puisque la variable largeur-plan grille $ est lu au moment de la compilation, pas d'exécution.

Y at-il un moyen de sortir une mise en page avec différentes largeurs de grille à l'aide d'une requête de médias pour obtenir une résolution d'écran?

problème de github connexes:
https://github.com/chriseppstein/compass/issues/302

Answer 1

Ce fut un bogue dans SASS. Il a été fixé à partir de la version 3.1.0:

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

Answer 2

Je suis en train de comprendre la même chose, mais il ne semble pas être une bonne façon d'obtenir ce travail de la façon dont je veux. Comme vous dites, variables se préparent au moment de la compilation, pas l'exécution de sorte qu'il est difficile de figure. Je pense que vous pourriez faire quelque chose comme ceci:

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

Mais alors vous auriez à faire ce même, la force brute sorte de remise à zéro du Plan directeur pour chaque média requête que vous souhaitez exécuter.