7

コンパス フレームワークとブループリント/グリッドの依存関係を介して saas を使用しています。次のように、メディアクエリを使用して列の幅を設定できるようにしたい:

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

これは /stylesheets/screen.css にコンパイルされます:

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

ただし、screen.css の残りの値は適切に設定されていません。$blueprint-grid-width 変数は実行時ではなくコンパイル時に読み取られるため、これは理にかなっていると思います。

メディア クエリを使用して画面解像度を取得することにより、異なるグリッド幅のレイアウトを出力する方法はありますか?

関連する github の問題:
https://github.com/chriseppstein/compass/issues/302

4

2 に答える 2

5

これは SASS のバグでした。バージョン 3.1.0 で修正されました。

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

于 2011-05-05T17:56:28.157 に答える
2

私は同じことを理解しようとしていますが、これを私が望むように機能させるための良い方法はないようです。あなたが言ったように、変数は実行時ではなくコンパイル時に設定されるので、理解するのは難しいです。私はあなたがこのようなことをすることができると思います：

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

ただし、実行するすべてのメディアクエリに対して、これと同じブルートフォース攻撃によるブループリントのリセットを実行する必要があります。

于 2011-03-16T21:23:12.110 に答える