インモビインモビ

かなり単純なウェブサイトでさえ、私はあなたが何度も設定する必要がある特に重要な色が1つあるに違いないと思います。変数を使用すると、物事を乾燥させ続けるだけで、簡単に微調整できます。それはまさに私がこの投稿を始めたコードです。しかし、変数はますます強力です。ちょうどそれ --brandColor 変更せずに微調整可能です…

footer {
  background: color-mix(in oklch, var(--brandColor), black 20%);
}

今、そのブランドの色を微調整すると、微調整（男）を微調整します。

私にとってはワイルドでさえ、1つのカスタムプロパティを設定することです（用語をやり取りするのがどれだけ楽になりますか？）は、あちこちで効果をもたらす可能性があります。これは、コンテナスタイルのクエリのおかげです。

このようなコードを検討してください：

@container style(--darkBackground) {
  > * { color: white; }
}

今if --darkBackground すべての要素で（任意の価値に）設定されていますが、すべての直接の子供は白いテキストを持っています。これをサポートしています かなり限られています、ですから、これがCSSの書き方にどのように影響するかを私たちの誰もが強く理解するまで、しばらく時間がかかります。私にとって、これはに似ています :has() どのように変化 どこでも ページでは、他の場所での変更に影響を与える可能性があります（私は主張します）予想外の方法です。強力な方法。多分便利な方法。しかし、予想外の方法。 CSSはかつてかなり途方もないトップダウンの言語であり、それは変化しています。

そのような限られたサポートを備えた機能はどうですか？それらの1つはです if() 声明 （WOAH）、CSS変数のテストにのみ役立ちます。私はファンですが、ここですべてを理解しません。別のLea Verou投稿です 提案：CSS変数グループ。確認してください：

:root {
  --color-green: {
    100: oklch(95% 13% 135);
    200: oklch(95% 15% 135);
    /* ... */
    900: oklch(25% 20% 135);
  };
}

これは、ように使用される変数に変わります var(--color-green-200)。変数のセットを宣言するこのような寒い方法なし たくさんの繰り返し。 著者のためだけですが、それは大丈夫だと思います。 CSS変数私は主にプロセス後の時代（HEH）に存在するように感じます。したがって、おそらくループなどでこれを抽象化するものであっても、もうそれはありません。