상위 범위의 변수를 평가하는 데 사용될 때 CSS 범위 사용자 정의 속성이 인식되지 않습니다.

Question

클래스가 결합 없이 구성될 수 있도록 var 사용자 정의 속성을 통해 크기를 조정하려고 합니다. 원하는 효과는 3개의 목록이 3개의 서로 다른 스케일을 가지게 되는 것입니다. 그러나 CodePen에 표시된 것처럼 3개의 목록은 모두 동일한 스케일을 갖습니다. 저는 구성 가능하고 느슨하게 결합된 코드로 이를 가능하게 하는 범위 지정 및 CSS 사용자 정의 속성 기술에 대한 설명을 찾고 있습니다. :root{--size-1:calc(1*var(--scale,1)*1rem);--size-2:calc(2*var(--sca

P粉440453689 · Answer

귀하의 경우에는 하위 요소 내부에서 --scale 自定义属性来定义 --size-* 属性，然后定义了 --scale 루트 수준에서 다시 를 평가했습니다. 상위 레이어에서 이미 수행되었으므로 평가가 다시 실행되지 않습니다.

다음은 이 문제를 설명하는 간단한 예입니다.

으아악 으아악

문제를 해결하려면 :root 移至与 --scale에서 동일한 수준으로 선언을 정의해야 합니다.

으아악 으아악

이 경우에는 --scale 的定义级别与其评估相同，因此将为每种情况正确定义 --size-*.

출처 사양:

첫 번째 경우에는 루트 수준의 --scale에 값이 지정되지 않았기 때문에 3에서 멈췄습니다. 마지막 경우에는 동일한 수준에서 --scale을 정의했고 그 값을 갖고 있기 때문에 --scale指定值。在最后一种情况下，我们陷入了2，因为我们在同一级别定义了--scale2

에 갇혔습니다.

:root모든 경우에

수준에서의 평가는 유용하지 않으므로 피해야 합니다. 루트 레벨은 DOM의 최상위 레벨이므로 모든 요소는 동일한 값을 상속하므로 변수를 다시 평가하지 않는 한 DOM 내에서 다른 값을 갖는 것은 불가능합니다.

귀하의 코드는 다음 코드와 동일합니다:

으아악

또 다른 예를 들어보겠습니다:

으아악 으아악

:root 级别定义的 3 个变量之一来更改 --color직관적으로는

레벨에 정의된 3개의 변수 중 하나를 변경하여 --color를 변경할 수 있다고 생각할 수도 있지만, 그렇게 할 수 없으며 위의 액션 코드는 다음과 같습니다.

으아악 으아악

--r、--g、--b）在 :root3개의 변수(--r, --g, --b)는

code> 내에서 평가되므로 이를 사용했습니다. 교체하십시오.

이 경우 3가지 가능성이 있습니다:

:rootJS 또는 기타 CSS 규칙을 사용하여

으아악 으아악 🎜

필수 요소 내에서 변수를 다시 평가하세요. 이 경우 유연성을 잃고 :root 내부의 정의가 쓸모 없게 됩니다(또는 적어도 기본값이 됩니다):

으아악 으아악

:root 选择器更改为通用选择器 * 선택기를 범용 선택기 *로 변경하세요. 이렇게 하면 우리의 기능이 모든 수준에서 정의되고 평가됩니다. 일부 복잡한 경우에는 원치 않는 결과가 발생할 수 있습니다

으아악 으아악

이 점을 염두에 두고 우리는 항상 DOM 트리에서 가능한 가장 낮은 지점까지 평가를 유지해야 합니다. 특히 변수가 변경된 후(또는 동일한 수준에서)

이것은 해서는 안되는 일입니다

으아악 으아악

이것이 우리가 해야 할 일입니다

으아악 으아악

우리는 이것을 할 수도 있습니다:

으아악 으아악