CSS の世界では、全体にわたって使用できるグローバル変数を設定する方法が長年必要とされてきました。スタイルシート。値を変更するときに、値のすべてのインスタンスを手動で変更するのは非常に面倒なため、これは開発者にとって大きなストレスでした。
良いニュース:
ついにCSSカスタムプロパティ(変数)が登場しました!変数の導入により、開発者は共通の値と色を一元管理できるようになり、テーマの管理と変更の適用が非常に簡単になりました。
1.ルート クラスを定義します。
スタイルシートの先頭に :root 擬似要素を作成します。これはカスタム プロパティのコンテナとして機能します。
<code class="css">:root { }</code>
2.変数の設定:
:root 要素内で、次の構文を使用して変数を宣言します:
<code class="css">--variable-name: value;</code>
3.変数の使用:
var() 関数を使用して、CSS ドキュメント内の任意の場所で変数を使用できるようになりました:
<code class="css">h1 { color: var(--color-primary); }</code>
CSS カスタム プロパティは、Firefox、Chrome などの最新のブラウザで広くサポートされています。 、Safari、Opera、Edge、Android。
CSS カスタム プロパティは、CSS スタイルの変革をもたらします。これらは、グローバルな値とテーマを管理し、コードのメンテナンスを簡素化し、全体的な開発者エクスペリエンスを向上させるための強力な機能を提供します。この新機能を活用して、プロジェクトで CSS 変数の可能性を解き放ってください。
以上がCSS グローバル変数: テーマ管理の未来ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。