SASS / Compassとメディアクエリの仕組みを理解していないと思います。ブラウザの CSS エンジンや従来のセレクタ (id、class、tag) によって解釈されるメディア クエリとは対照的に、変数はクライアントに送信される前にコンパイラによって変換されます。
コンパイラは、メディア クエリを条件として解釈しません。これは、単にコンパイル時に画面サイズが定義されておらず、特にそれが彼の仕事ではないためです。
以下は、何が起こるかを簡略化したものです。
- 1
$arrow-size: 30px;
"よし、新しい変数arrow-size
を30px
"
- 3
@media only screen and (max-width: 449px) {
「わかりました、新しいセレクター...構文は正しいです。ブレースが閉じている場合は後で調べます。」
- 4
$arrow-size: 15px;
"よし、arrow-size
変数を15px
"
- 5
}
「わかりました、ブレースは閉じています」
- ...
- 13
border-bottom: $arrow-size solid white;
「新しい css ルール、構文 OK... ああ、変数を置き換えなければなりません!いくら$arrow-size
ですか?ああ、そうです15px
、私はそれを変更します。」
その結果、コンパイルされた CSS ファイルは次のようになります。
screen.css
@media only screen and (max-width: 449px) {
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: 15px solid white;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
メディアクエリをセレクターに入れることもできます:
$arrow-normal-size: 30px;
$arrow-small-size: 15px;
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: solid white;
border-left: solid transparent;
border-right: solid transparent;
border-width: $arrow-normal-size;
@media only screen and (max-width: 449px) {
border-width: $arrow-small-size;
}
}
または mixin を使用します:
この特定のケースでは少し役に立たない
@mixin responsive-border($max-screen-width, $border-width){
@media only screen and (max-width: #{$max-screen-width}) {
border-width: $border-width;
}
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: solid white;
border-left: solid transparent;
border-right: solid transparent;
border-width: 30px;
@include responsive-border(449px,15px);
}