0

私はこのようなことをしようとしています:

$arrow-size: 30px;

@media only screen and (max-width: 449px) {
  $arrow-size: 15px;
}

div.selector {
  height: 0px;
  width: 0px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-bottom: $arrow-size solid white;
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}

残念ながら、$arrow-size はメディア クエリによって変化しません (ウィンドウの幅が 449px よりも広い場合でも、矢印は常に 15px です)。

何か案が ？それとも、問題を間違った方法で取っていますか?

4

3 に答える 3

2

私はミックスインを使用します：

@mixin arrow($size) {
  border: $size;
}

次に、次のようにメディアクエリで使用できます（変数と組み合わせて）：

$arrowSize: 30px;

@media only screen and (max-width: 449px) {
  div.selector {
    @include arrow($arrowSize / 2);
  }
}

div.selector {
  @include arrow($arrowSize);
}
于 2013-09-03T13:44:43.730 に答える
1

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);
}
于 2014-02-10T14:38:56.003 に答える