[解決済み] CSS3メディアクエリでSass変数を使用する

質問

以下のように、Sass変数の使用と@mediaクエリを組み合わせようとしています。

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width は、スタイルシートの様々な箇所で定義され、流動的なレイアウトを生成するためにパーセンテージベースの測定を行います。

このようにすると、変数はきちんと認識されているようですが、メディアクエリの条件がずれてしまいます。 例えば、上記のコードでは、画面幅に関係なく1160pxのレイアウトが生成されます。 このように@mediaの記述を反転させると。

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

画面幅に関係なく、これまた960pxのレイアウトが出来上がります。 また、最初の行の $base_width: 1160px; を実行すると、未定義の変数に対するエラーが返されます。 何が足りないのでしょうか？

解決方法は？

これは単純にあり得ないことです。トリガーは @media screen and (max-width: 1170px) はクライアントサイドで発生します。

期待される結果を得るには、SASS が $base_width 変数にコピーし、それに応じて変更します。

自動ではうまくいかないので、このように手作業で行うこともできます。

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

これは本当の意味でのDRYではありませんが、あなたができる最善の方法です。

もし、変更点が毎回同じであれば、変更する値をすべて含むmixinを用意すれば、繰り返す必要はないでしょう。さらに、そのmixinに特定の変更点を組み合わせてみることもできます。みたいな感じ。

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren't in the mixin
        display: block

そして、Mixinは次のようになります。

=base_width_changes($base_width)
    #wrapper
        width: $base_width