CSS カスタム プロパティ (変数) とは何ですか? また、ダブルダッシュ プレフィックスはどのように機能しますか?

二重ダッシュで始まるカスタム CSS プロパティについて

提供されたコード スニペットで、二重ダッシュ (--) で始まる CSS プロパティが見つかりました。 --color-link や --font-thin など。これらのプロパティは、一連の CSS カスタム プロパティに属しており、CSS スタイル設定の柔軟性とカスタマイズを向上させるユーザー定義プロパティです。

カスタム プロパティに関する W3C 仕様によれば、これらの二重ダッシュの接頭辞が付いているプロパティは、次の構文を使用して定義されます:

--<property-name>: <value>;</value></property-name>

ここで、--property-name はカスタム プロパティの名前です。 は、そのプロパティに必要な値です。

カスタム プロパティは、いくつかの目的を果たします。

• 文体の柔軟性: カスタム プロパティを使用すると、複数の要素にわたる CSS プロパティを簡単に変更できます。冗長な宣言の必要性を減らします。
• テーマ管理: カスタム プロパティを使用できます。テーマ固有の変数を定義し、異なるテーマ間の切り替えプロセスを簡素化します。
• 変数置換: 変数を他の CSS プロパティの値として使用できるようになり、スタイル設定の柔軟性が向上します。

var() 関数を使用すると、他の CSS 宣言内のカスタム プロパティの値にアクセスできます。たとえば、次のコードでは、#foo h1 要素の color プロパティが --main-color カスタム プロパティの値に設定されます:

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

参照情報

• [W3C カスタム プロパティ仕様](https://www.w3.org/TR/css-variables/)
• [MDN Web ドキュメント: CSS カスタム プロパティ](https://developer.mozilla.org/en-US/ docs/Web/CSS/Using_CSS_custom_properties)
• [CSS のコツ: カスタムのすべてプロパティ](https://css-tricks.com/custom-properties-all-the-things/)

以上がCSS カスタム プロパティ (変数) とは何ですか? また、ダブルダッシュ プレフィックスはどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。