結合せずにクラスを構成できるように、var カスタム プロパティを使用してサイズを調整しようとしています。望ましい効果は、3 つのリストが 3 つの異なるスケールを持つことですが、CodePen に示されているように、3 つのリストはすべて同じスケールになります。私は、構成可能な疎結合コードでこれを実現できるスコープと CSS カスタム プロパティ手法の説明を探しています。
P粉4404536892023-11-02 11:27:45
あなたの場合、ルート レベルで --scale カスタム プロパティを評価して --size-* プロパティを定義し、次に - -scale を定義しました。 子要素内の も同様です。評価は 上位層 ですでに行われているため、これによって再度評価がトリガーされることはありません。
次は、この問題を説明するための簡単な例です:
問題を解決するには、宣言を :root から --scale 定義と同じレベルに移動する必要があります:
この場合、--scale はその評価と同じレベルで定義されているため、--size-* はそれぞれの場合に正しく定義されます。
仕様書より:
最初のケースでは、ルート レベルで--scale に値が指定されていないため、3 で行き詰まっています。最後のケースでは、--scale を同じレベルで定義し、その値を持っているため、2 で行き詰まっています。
:root レベルでの評価は役に立たないため、いかなる場合でも避けるべきです。ルート レベルは DOM の最上位レベルであるため、すべての要素は同じ値を継承します。変数を再度評価しない限り、DOM 内で異なる値を持つことは不可能です。
リーリー
:root レベルで定義された 3 つの変数の 1 つを変更することで --color を変更できると思うかもしれませんが、上記の操作ではこれを行うことはできません。コード これと同じ:
--r、--g、--b) は :root code> 内で評価されるため、次のようになります。それらをその値に置き換えました。
内の変数を変更します。これでは、異なる色を使用することはできません:
内の定義は役に立たなくなります (または、少なくともデフォルトになります)。
リーリー リーリー
:root セレクターをユニバーサル セレクター * に変更します。これにより、関数がすべてのレベルで定義され、評価されることが保証されます。一部の複雑なケースでは、これにより望ましくない結果が生じる可能性がありますこれを念頭に置いて、評価を常に DOM ツリーの可能な限り最下位のポイントに保つ必要があります。特に、変数が変更された後は (または同じレベルで)
これはしてはいけないことです