【ワレコCSS講座】今日覚えたSCSSとCSSのテクニック

今日覚えたSCSSのテクニックとCSSのテクニックを紹介したい。 と言うか、単にワテの備忘録であるが。 SCSSの calc() 関数の中で変数を使う方法 CSSなら calc() を使うとこんな計算が可能だ。 div.my_class{ width: calc(100% - 50px); } CSSをやっていると calc() は良く使う。 何かの値を少し変更したい場合など。 上の例では div の幅を 100% から 50px だけ小さな値にしている。 一方、SCSSで同じ計算をする場合に、引き算したい値を変数で与えたい場合がある。 こんな例だ。 $my_variable:50px; // 変数に値をセットする div.my_class{ width: calc(100% - $my_variable); // その変数を使って計算するつもり } ところがこれでは上手く行かない。 上の