【シーエスエスカスタムプロパティ】
CSSカスタムプロパティ とは？
💡 CSSに「変数」の力を与えた、スタイル管理の革命児
📌 このページのポイント
- --primary-colorのように--で始まる名前で宣言し、var(--primary-color)で参照する
- :rootに定義すればグローバル変数、特定セレクタに定義すればローカル変数として機能する
- JavaScriptからリアルタイムに値を変更でき、動的なテーマ切り替えが簡単に実現できる
- SassやLessの変数と違い、ブラウザが実行時に評価するためカスケードや継承の恩恵を受けられる
ペンギン先生 あるんだよ。--main-color: #4A90D9;と宣言して、color: var(--main-color);と書けば、その色を何か所でも再利用できる。値を変えたいときは宣言を1か所変えるだけで全部に反映されるんだ
ひよこ Sassの変数と何が違うの？
ペンギン先生 ひよこ ダークモードの切り替えに使えるって聞いたけど？
ペンギン先生 まさにその通り。:rootに--bg-color: #fffと定義して、.dark-themeで--bg-color: #222と上書きするだけでテーマ切り替えが完成する。bodyにクラスを1つ付け替えるだけで全体の色が変わるから、ダークモード実装の定番パターンになっているよ
ひよこ var()の中にフォールバック値を書けるって本当？
ペンギン先生 ひよこ パフォーマンスに影響はないの？
ペンギン先生 基本的には心配ないけど、大量のカスタムプロパティを頻繁にJavaScriptから更新すると再描画コストがかかることはあるよ。また@propertyルールを使うと型や初期値を定義でき、ブラウザの最適化が効きやすくなる。アニメーションでカスタムプロパティをトランジションさせることも@propertyで可能になったんだ
📖 おまけ：英語の意味
「CSS Custom Properties」 ＝ CSSのカスタム（独自定義）プロパティ
💬 正式にはCSS Custom Properties for Cascading Variablesという仕様名で、「CSS変数」は通称なんだよ。カスケード（優先順位の連鎖）に対応しているのが最大の特徴だよ