CSS スコープのカスタム プロパティを親スコープ内の変数の評価に使用すると認識されない

Question

結合せずにクラスを構成できるように、var カスタム プロパティを使用してサイズを調整しようとしています。望ましい効果は、3 つのリストが 3 つの異なるスケールを持つことですが、CodePen に示されているように、3 つのリストはすべて同じスケールになります。私は、構成可能な疎結合コードでこれを実現できるスコープと CSS カスタム プロパティ手法の説明を探しています。

リーリー リーリー

Answer 1

あなたの場合、ルート レベルで --scale カスタム プロパティを評価して --size-* プロパティを定義し、次に - -scale を定義しました。 子要素内の も同様です。評価は 上位層 ですでに行われているため、これによって再度評価がトリガーされることはありません。

次は、この問題を説明するための簡単な例です:

リーリー リーリー

問題を解決するには、宣言を :root から --scale 定義と同じレベルに移動する必要があります:

リーリー リーリー

この場合、--scale はその評価と同じレベルで定義されているため、--size-* はそれぞれの場合に正しく定義されます。

---

仕様書より:

最初のケースでは、ルート レベルで

--scale に値が指定されていないため、3 で行き詰まっています。最後のケースでは、--scale を同じレベルで定義し、その値を持っているため、2 で行き詰まっています。

---

:root レベルでの評価は役に立たないため、いかなる場合でも避けるべきです。ルート レベルは DOM の最上位レベルであるため、すべての要素は同じ値を継承します。変数を再度評価しない限り、DOM 内で異なる値を持つことは不可能です。

あなたのコードは次のコードと同等です:

リーリー

---

別の例を挙げてみましょう:

リーリー リーリー

直感的には、

:root レベルで定義された 3 つの変数の 1 つを変更することで --color を変更できると思うかもしれませんが、上記の操作ではこれを行うことはできません。コード これと同じ:

リーリー リーリー

3 変数 (

--r、--g、--b) は :root code> 内で評価されるため、次のようになります。それらをその値に置き換えました。

この場合、3 つの可能性があります:

JS または他の CSS ルールを使用して、
• :root 内の変数を変更します。これでは、異なる色を使用することはできません:

リーリー リーリー

目的の要素内で変数を再度評価します。この場合、柔軟性が失われ、
• :root 内の定義は役に立たなくなります (または、少なくともデフォルトになります)。

リーリー リーリー

• :root セレクターをユニバーサル セレクター * に変更します。これにより、関数がすべてのレベルで定義され、評価されることが保証されます。一部の複雑なケースでは、これにより望ましくない結果が生じる可能性があります

リーリー リーリー

---

これを念頭に置いて、評価を常に DOM ツリーの可能な限り最下位のポイントに保つ必要があります。特に、変数が変更された後は (または同じレベルで)

これはしてはいけないことです

リーリー リーリー

これが私たちがやるべきことです

リーリー リーリー

こんなこともできます:

リーリー リーリー