今日覚えた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); // その変数を使って計算するつもり
}
ところがこれでは上手く行かない。
上のSCSSの出力結果は以下の通り。
div.my_class {
width: calc(100% - $my_variable); // あかん。
}
変数部分が置換されずに、変数の名前自体が出力CSSファイルに書き込まれてしまっている。
あかんがな。
解決方法を検索して調べたら判明した。
以下の様にすると上手く行く。
$my_variable:50px; // 変数に値をセットする
div.my_test_class{
width: calc(100% - #{$my_variable}); // このようにすると上手く行く
}
正しく出力されたCSSファイル
div.my_test_class {
width: calc(100% - 50px);
}
なお、CSSでもSCSSでも、calc() 計算式の中の半角スペースを除去して詰めてしまうと正しく動作しないので要注意だ。
半角スペースを除去したCSS（これは動かない例）
div.my_test_class {
width: calc(100%-50px); // 演算子の前後の半角スペースを除去してはいけない
}
CSSをやり始めた当初のワテはその事を知らずに、何時間も試行錯誤した苦い経験がある。
やはり公式文書を読んで正しい知識を得る事が重要だろう。
CSS の calc() 関数のホワイトスペースは重要
MDN（Mozilla Developer Network ）の CSS の calc の項目を引用すると以下の通り。
注記: + 演算子と – 演算子は常に前後にホワイトスペースをつけて記述しなければなりません。
なぜなら 8px を引く意図で calc(50% -8px) と記述した場合、50% と -8px が並んでいるものと解釈され、無効な式となるからです。
calc(50% – 8px) はパーセンテージ、減算記号、長さの順に並んでいるものと解釈されます。
また、calc(8px + -50%) は長さ、加算記号、負のパーセンテージの順に並んでいるものと解釈されます。
* 演算子と / 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。
引用元 https://developer.mozilla.org/ja/docs/Web/CSS/calc
要するに calc() のカッコ内の式においては半角スペースで各項目を区切る必要があるのだ。
なお、Visual Studio 2017 Community で試した限りでは SCSSのcalc() 計算式の中で半角スペースを除去しても、変数の置換は正しく動いてCSSファイルは出力出来た。
でもその出力CSSファイルにおいても半角スペースが無いので、結果的にはそのCSSは期待した動きをしない。
:hovor と ::before を組み合わせる事が可能だ
今日、こんな場面に遭遇した。
:hovorと::before を組み合わせたいのだ。
適当にこんなふうに連結 :hover::before したら上手く行った。
div:hover::before {
background-color: red;
content:'★';
}
ちなみにCSS 疑似要素とCSS 疑似クラスは以下の通り。
CSS 疑似要素 (Pseudo-elements)
すべての疑似要素
::after
::after
::before
::first-letter
::first-line
::selection
::backdrop
補足
時々、1 個のコロン (:) ではなく、2 個のコロン (::) が使用されることがあります。これは、CSS3 の一部であり、疑似クラスと疑似要素の区別を明確にしようとするためのものです。多くのブラウザは両方の値をサポートしています。
引用元 https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
CSS 疑似クラス (Pseudo-classes)
すべての標準疑似クラス
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
なお、上でやったように、
:擬似クラス::擬似要素
例 :hover::after
は動作したが、逆にして
::擬似要素:擬似クラス
例 ::after:hover
と書くと動作しないので要注意だ。
まとめ
ワテの場合、約一年半ほをWEBプログラミングして来た。
当初はCSSで書いていたのだが、最近ではSCSSをよく使う。
SCSSの何が便利かと言うと、
- 変数が使える
- 入れ子（ネスト）した記述が可能
- @if, @elseif, @else などの条件分岐が可能（switch文は無いが）
などである。
SCSSならこう言う入れ子の記述が可能だ。
div {
background-color:red;
> p {
background-color:green;
}
}
これをVisual StudioのSCSSコンパイラに掛けると以下のCSSが出力出来る。
div {
background-color: red;
}
div > p {
background-color: green;
}
LESSと言うのもあるようだが、それはまだ良く知らない。今後勉強する予定だ。
コメント