カスタムプロパティを備えた大きなゴッチャ

最近、私は多くの人々（私を含む）がCSSカスタム属性のこの機能に混乱していることを発見したので、私はそれを記録することにしました。

CSSにいくつかのカスタムプロパティを追加しましょう。

 html {
  -color-1：赤;
  -Color-2：青。
}

それらをすぐに使用して、背景勾配を作成します。

 html {
  -color-1：赤;
  -Color-2：青。

  -BG：線形勾配（右、var（ -  color-1）、var（ -  color-2））;
}

ここで、ページに2つのdivがあるとします。

<div></div>
<div></div>

それらをスタイリングしましょう：

 div {
  背景：var（ -  bg）;
}

これは完全に機能します！素晴らしい！

それでは、スタイルを変更しましょう。赤から青に変えたくないので、緑から青に変えたいです。それは非常にシンプルです、私は赤を緑に更新しました：

 html {
  -color-1：赤;
  -Color-2：青。

  -BG：線形勾配（右、var（ -  color-1）、var（ -  color-2））;
}
div {
  背景：var（ -  bg）;
}
.Variation {
  -color-1：緑。
}

無効！ （サイレンは大きく、角は騒々しく、家畜はどこにでも隠れています）。

友達、これはうまくいきません。

私が理解する限り、問題は--bg Divで宣言されたことがないことです。 --bg 、より高いレベルで宣言されているため、使用できますが、使用すると値がロックされています。 --bg宣言の場合に使用される他の属性を変更したからといって、属性が依存関係として使用されているすべての場所を探し、それを使用するすべての場所を更新することを意味しません。

悲しいかな、この説明は正しいとは感じません。しかし、これは私が考えることができる最良の説明です。

解決？まあ、いくつかあります。

ソリューション1：変数スコープを使用している場所に制限します。

あなたはこれを行うことができます：

 html {
  -color-1：赤;
  -Color-2：青。
}

div {
  -BG：線形勾配（右、var（ -  color-1）、var（ -  color-2））;
  背景：var（ -  bg）;
}
.Variation {
  -color-1：緑。
}

現在、 --bgは両方のdivで宣言され、 --color-1依存関係の変更が機能します。

ソリューション2：コンマを分離した状態で、ほとんどの変数のセレクターを設定します。

:rootで多数の変数を設定するという一般的な操作を行ったとします。その後、この問題に遭遇します。メイン宣言に追加のセレクターを追加して、正しい範囲を押すことを確認できます。

 HTML、
div {
  -color-1：赤;
  -Color-2：青。

  -BG：線形勾配（右、var（ -  color-1）、var（ -  color-2））;
}
div {
  背景：var（ -  bg）;
}
.Variation {
  -color-1：緑。
}

他のいくつかの例では、あまりにも遠くないかもしれませんが、次のように見えるかもしれません。

 ：根、 
。ボタン、
。
   - パッディングインライン：1rem;
   - パディングブロック：1Rem;
   - パディング：var（ - パディングブロック）var（ - パディングインライン）;
}

。ボタン {
  パディング：var（ - パディング）;
}
.button.less-wide {
   - パッディングインライン：0.5rem;
}

ソリューション3：包括的なモード

彼に行く - どこにでも変数を置きます。

 * {
   - アクセス：私;
   - どこでも：あなた;
  -want：to;

  -HOGWILD：var（ - アクセス）var（-wherewhere）;
}

これは良い解決策ではありません。最近、ページのレンダリングにより中規模サイトの1つが500ms遅れたチャットを聞いたことがあります。ページのすべての描画では、すべての属性を計算する必要があるためです。それは「動作」しますが、これはセレクターを通じて正当なパフォーマンスの問題を引き起こすことができる数少ない例の1つです。

ソリューション4：新しい「デフォルト」プロパティとフォールバックを導入します

ここでのすべてのクレジットは、このコンテンツのすべての探求で最初に見たステ​​ィーブンショーにクレジットされています。

この質問を最初に示したところに戻りましょう。

 html {
  -color-1：赤;
  -Color-2：青。

  -BG：線形勾配（右、var（ -  color-1）、var（ -  color-2））;
}

私たちがしなければならないことは、2つのことを与えることです。

1. 背景全体をカバーする方法
2. 勾配の背景の一部をカバーする方法

だから私たちはこれをしなければなりません：

 html {
  -color-1：赤;
  -Color-2：青。
}
div {
  -BG-DEFAULT：線形勾配（右、var（ -  color-1）、var（ -  color-2））;
  背景：var（ -  bg、var（ -  bg-default））;
}

--bgをまったく宣言しないことに注意してください。値を待っているだけで、値を取得した場合、それは「勝利」の価値です。しかし、そうでない場合は、 --bg-defaultに戻ります。今……

1. --color-1または--color-2を設定すると、予想どおりに勾配のその部分を置き換えます（Divの1つに触れるセレクターでこれを行う限り）。
2. または、 --bgを設定して、背景全体を必要なものにリセットすることができます。

それはそれに対処する良い方法のように感じます。

CSSカスタムプロパティに実際にエラーがある場合があります。しかし、それはそれらの1つではありません。たとえそれが私にとってバグのようなものであっても、明らかにそうではありません。あなたが知っておくべきことの1つだけです。

以上がカスタムプロパティを備えた大きなゴッチャの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。