質問: お世話になっております。 現在CSS3を使ってCSSでレイアウトを作成しています。 早速質問なのですが、変数の値をmedia queryによって変化させたいのですが、どうも動作しません。 CSS Variablesを利用しようと思ったのですが、IE11&Edgeに対応せざるを得ない状況でこれを利用することができませんのでSassを利用しようと思い使ってみました。 例えばfont-sizeを動的に変更させたいのですが、 横サイズが500px以上: size20が指定されていたら20px, size30なら30px; 横サイズが700px以上: size20が指定されていたら20px, size30なら30px; としたいと思っています。 ``` $fontSize: 16px; .test { background-color: $color; font-size: $fontSize; } @media (min-width: 500px) { .size20 { $fontSize: 20px; } .size30 { $fontSize: 30px; } } @media (min-width: 700px) { .size20 { $fontSize: 20px; } .size30 { $fontSize: 30px; } } ``` としているのですが、16pxから変化しません。 CSS Variablesと同じような挙動をさせることをSassで実現する方法はありませんでしょうか? 宜しくお願い致します。
回答: 下記のような設定であれば、適用されます。 ``` サンプル20 サンプル30 ``` ``` $fontSize : "16px"; $color : "#ff0000"; .test { background-color: $color; font-size: $fontSize; } @media (min-width: 500px) { .size20 { font-size: 20px; } .size30 { font-size: 30px; } } @media (min-width: 700px) { .size20 { font-size: 20px; } .size30 { font-size: 30px; } } ```