実際にサイトを作る際、セクションごとにfont設定がバラバラということはまずないでしょうし、色についてもメインのテーマカラー、補色でサブカラー、反対色でアクセントカラーのように、数種類に絞って制作にあたると思います。
そうなるとCSSファイル内で、「同じプロパティに同じ値」を繰り返し使う場面が出てきます。
それを擬似クラス 「:root」と変数を使い一括で指定できるのがカスタムプロパティです。CSS変数という呼ばれ方もします。
とりあえず使い方から見ていきましょう。
カスタムプロパティの指定方法
「変数」というと急にプログラミング感が出て及び腰になりそうですが、何も臆することはありません。
まずCSSファイルの冒頭に 一括指定したいプロパティを記述していきます。例ではメインカラーを指定することにします。
:root{
--maincolor : rgb(255, 127, 80) ;
}CSS変数は:root｛｝で記述します。
例では、「–maincolor」 が変数名となります。変数名に特に決まりは無いので、–abc でも好きな名前で良いです。大文字小文字の違いは別の変数と認識されるので注意。
これで、–maincolorに rgb(255,127,80) がセットされました。
そして、以降メインカラーを使う場面で、
h2{
color: var (--maincolor );
}や、
#example{
background-color: var(--maincolor) ;
}のように、var( )の形で変数名を指定してやると、:rootで設定した「 rgb(255, 127, 80)」が適用されます。
var はvariabe（変数）のことで、プログラミング初期に習うやつですね。
こうしておくと、後々メインカラーを変更したくなったときも、:rootの設定だけ変えれば済むので非常に楽です。
また、値が長いもの。たとえばlinear-gradientを複数重ねている背景などでも、カスタムプロパティで指定しておけば一度記述するだけで良いので楽です。その都度書かなくて良いのでスペルミスが無くなるというメリットもあります。
変数の中でも変数は使える
linear-gradientが出てところで、変数の中でも変数が使える例をご紹介。
:root{
--maincolor : rgb(255, 127, 80);
--subcolor : rgb(150, 100, 50);
--linear : ( var(--maincolor) , var(--subcolor) ) ;
}
.sample{
background:linear-gradient( var(--linear) );
}のように、変数の中に別の変数をあてがうことも可能です。
プロパティ名には使用できない
変数をプロパティ名に利用することは出来ません。
:root{
--fs : font-size ;
}と指定して、
.sample{
var(--fs): 20px ;
}と、プロパティに利用してもエラーとなりますのでご注意ください。
ブラウザ対応と代替値の関係
CSS変数は便利ですが、使う場面を間違ってしまうと当然反映されません。
たとえば
/* --maincolor に色を代入 */
:root{
--mainclor: #ffffff ;
}
.example{
font-size: var(--maincolor );
} としてしまうと、当然無効な値としてエラーになります。
他にも、「変数–maincolorが設定されていない」「スペルミス（–mainclorになっている）」など、カスタムプロパティが無効となってしまう場合でも、フォールバック値を指定しておくことでエラーを防げます。
フォールバック（代替値）は変数のあとにカンマ区切りで入力します。
#{
background-color: var(--maincolor , #fafafa );
}代替値を入力しておくと、変数が無効だった場合に代替値が適用され、エラーを防げます。
代替値はブラウザ互換を助けることはできない
CSS変数はほぼ全てのブラウザで利用可能ですが，InternetExplorerでは利用できません。
個人的にはIEは無視すべきと考える強硬派ですが、残念ながらそうも言っていられない大人の事情が大多数です。
代替値はIE互換を助けるものではないので、IE対応も考えるのであれば
#{
background-color: #fafafa;
background-color: var(--maincolor , #fafafa );
}という記述をせざるを得ません。
CSS変数とSCSS
このブログのHTMLやCSSネタは「独学でホームページやネットショップを運営している人、またはEC担当になったものの、HTMLもCSSもよく分からない人」向けに書いているつもりですが、中には最初からSCSS やSassでCSSを書いている人もいるかも知れません。
そのような方からは、「変数ではなくmixinを使えば良いのでは？」という疑問も出るのは当然のことでしょう。
個人的な意見で、CSS変数とmixinとの違いは以下の２点です。
コンパイルが必要ない
SCSSファイルはCSSファイルにコンパイル（変換）しないといけませんが、CSS変数には不要です。そりゃそうです。
メディアクエリが簡単
SCSSでレスポンシブの為のメディアクエリを書こうとすると、メディアクエリを別ファイルで作ってincludeで読み込みmixinで設定する という作業になりますが、CSS変数だと
:root{
--main-color: #fff;
}
@media (min-width:980px){
:root{
--main-color: #aaa ;
}
}のように、いつもの感覚ですらっと書けます。
管理する上でも楽かなと。
最後に
今回はいつものプロパティ解説と違い記法の話でした。
近年htmlもcssもどんどんテンプレート化、パッケージ化がすすみ、以前よりもスピーディな記述が可能となっています。
htmlもcssも、習得の近道は「とにかく実際にサイト制作すること」です。
CSS変数は基本知識の応用範囲なので、無理なく覚えられると思います。
どんどん書いて覚えていってください。
