CSS Custom Property
-- から始まるpropertyのことをCustom Propertyと呼ぶe.g.
--main-color: black; const --main-color = "black" のようなglobal定数を定義しているイメージvar()を使って呼び出す
e.g.
color: var(--main-color); 定義
csselement {
--main-bg-color: brown;
} const --main-bg-color = brown; のようなglobal定数を定義しているイメージただ実際は、完全なglobalではなく、
element の部分でscopeを宣言している div {..} と書けば、globalかつdivの中でのみで使用できる変数が定義される全要素で使う場合は、
:root {..} のように書く使用
csselement {
background-color: var(--main-bg-color);
}var()を使う
定義したscopeの中で、
var(--変数名) とすることで呼び出せる参考
>#WIP
ややこしそうな点
scopeは要素だけでなく、classとかも指定できる
継承されるので、完全にscopeの中でしか使えないというわけでもない
scopeは要素だけでなく、classとかも指定できる
例えば、このように書けば
.two classがscopeになるcss.two {
--test: red;
}まあ、CSS的に考えればこれは自然
scope外では無視される
例えばdivに対して定義する
cssdiv {
--main: red;
}classに対して使用する
css.hoge {
background-color: var(--main);
}この場合、この
.hoge というclassを、 <p> に付けたときは効かなくて、 <div> に付けたときだけ効く、という挙動になる
ややこしく見えるが、ただ単にscope外というだけ
継承される
.four 内で、 var(--test) を使えていることがポイント --test という変数は、 .two と .three にしか定義していないしかし、scope外の
.four で使用できているつまり、scopeが、HTMLに依存して変化する
これぱっと見、割と複雑に見えるけど実際どうなんだろう
実践していくと便利な仕様というかんじなんだろうか #??
一つの変数名に対して、1つの値しか定義できない
例えば、
--black-button という変数に対して (color, border, height) のような複数の値をセットすることはできないあくまでも、値は1つのみ
const --black-button = 値 であり、 値 の部分はrecordやtupleは除く、というイメージどういうもの？
CSSにおけるglobal変数みたいな？
そう
classを使ってstyleをやっていくのとはどう違うの？
web components以外の利用用途はある？
全然普通にある