CSS カスタム プロパティ (二重ダッシュを使用) とは何ですか?

難解なダブルダッシュ CSS プロパティの公開

CSS の領域では、先頭に 2 つのダッシュ (- -) プロパティ名にプレフィックスを付けます。この難解な表記は多くの開発者を困惑させ、答えを求めて頭を悩ませています。

心配しないでください。この謎めいた現象には重大な秘密が隠されています。これらの神秘的なプロパティはカスタム プロパティとも呼ばれ、CSS 変数の力を解き放つ鍵となります。提供されているコード例に見られるように、ルート要素内でカスタム プロパティを宣言すると、スタイルシート全体で値を定義して再利用できるようになります。

CSS 標準は、この変革的な機能についての包括的なガイドを提供します。 W3C 仕様ページによると、カスタム プロパティは 2 つの部分で構成されます:

1. 変数宣言: ここでカスタム プロパティに値を割り当てます。ルート要素内で宣言すると、すべてのネストされた要素で使用できるようになります。
2. 変数の使用法: 定義されたカスタム プロパティを利用するには、var() 関数を使用して参照するだけです。これにより、CSS コード内の任意のセレクターにプロパティの値を適用できます。

たとえば、次の例を考えてみましょう。

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

このシナリオでは、カスタム プロパティ - -main-color はルート要素内で定義されます。この値は、var(--main-color) を使用して #foo h1 セレクターの color プロパティに適用できるようになりました。

カスタム プロパティには、コードの再利用性の向上、テーマの切り替えの容易化など、さまざまな利点があります。強化されたカプセル化。この強力な機能を活用することで、CSS 開発に新たなレベルの優雅さと効率性をもたらすことができます。

以上がCSS カスタム プロパティ (二重ダッシュを使用) とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。