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