いよいよやっていく。
どういうアレか
phpとかjsは変数やら関数を使って使い回すのが一般的。同じことを何度も書いてると面倒くさいし、一括で変更することもあるし、単純に文字数が増えるし、目的のない重複にメリットはない。
同様のケースはcssにも発生する。個人的なとこでは、WEBサイトのテーマカラー（色コード）は地味に使い回す。最近はfont-familyも。一応エディタ上（VSCode）では一度入力した内容はサジェストで出してくれるのでそれほど手間じゃないんだけど、cssファイルを別個に用意したときは出ないんで探してこないといけない。
地味にめんどい。WEBサイトの規模がでかいとなおのことダルい。
cssにも変数はあるんで、やっていきましょう。
カスタムプロパティ
ここに書いてあるとおりのことをするだけ。
こんな感じで変数を定義する。
:root{
--color01: #000;
--size01: 20px;
}こんな感じで使う。
div{
color: var(--color01);
font-size: var(--size01);
}定義がなかった場合の保険も仕込める。
div{
color: var(--color01, #000);
font-size: var(--size01, 20px);
}
div{
color: var(--color01, var(--color02, #000));
font-size: var(--size01, var(--size02), 20px);
}第一引数がfalseだったら第二引数を読む感じ。
第二引数にも変数を突っ込んだり第三引数を仕込んだりできるけど、あんまりやり過ぎるとそれはそれでめんどくなるのでどうなんでしょう。
:rootじゃなくて要素指定で変数を作ることもできるけど、まあ要するに変数の対象を指定できるってことだけど、便利だけど、実際使うかどうかっていえば。後付で指定する場合ならあるいは？
使用感はemの継承と似てる。なので、見返したときに混乱しがち。
:root{ --test01: 24px;}
.test{ --test01: 12px;}
p{ font-size: var(--test01);} /* 24px */
p.test{ font-size: var(--test01);} /* 12px */変数を記述するcssファイルと呼び出しのcssファイルが別個になってても、別段何が必要というわけでもなく普通に使える。双方向的にリンクしてくれてるっぽくて、var()が先に読まれる構成になってても反映された。
自由度が高いのでこんな感じで分けてもいいってことになる。
style.css
├ root.css（変数定義）
└ index.css（変数使用）1つのファイル内に何でもかんでも入れるのがだるければ分ける、ファイルを小分けにしたほうがしんどければまとめる、って感じに状況に応じてどうぞ。
使い分けはある
変数だからいわゆる「値」の使い回しのためのものなんで、色々諸々設定したい、関数的なことがしたければそれ用のclassで構築して付与するのがいい。まあこれは従来どおりの使い方で済むってことですね。
いつ使うか
既存サイトへの追加コンテンツに突っ込んでも良いんだけど、それだとパフォーマンス的にあんまりって感じがする。
最初から作るときに導入するのが一番良さげな気がする。
なので、WEBサイト作るよとか、独立LPを作るよとか、そういう時。
縛るもんじゃないけど、まあ、うん。
画像のパスを格納する際の注意点
こういうのがあるとする。
css
└ style.css
img
└ image.jpgこうなる。
:root{
--image-url: url(../img/image.jpg);
}
div{
background-image: var(--image-url);
}問題なくできる。
次に、こういうのがあるとする。
style.css
css
└ column.css
img
└ image.jpgstyle.cssで:rootを宣言してcss/column.cssで出力したいとすると、こうなる。
:root{
--image-url: url(../img/image.jpg);
}div{
background-image: var(--image-url);
}何が言いたいかといえば、相対パスを登録する場合は出力側のCSSを基準にしたパスにしなければいけない、ということ。
この場合、style.cssで宣言してるのにstyle.cssでは使えない変数になっちゃってる。
なので、画像とかを扱う場合は絶対パスで書いた方がいい。面倒くさいけど。
追記：20230922
格納できるのは値だけ。だから、こういうのはできない。
:root{
--image-tmp: background: url(../img/image.jpg);
}あれば便利だけどね。でも、諸々をまとめたいならそれ用のclassを作ればいい話。横着の先には既存の手段が待ってる。
コメント