범위가 지정된 CSS 사용자 정의 속성이 때때로 계산에 대해 올바르게 계단식으로 배열되지 않는 이유는 무엇입니까?

CSS에서 범위가 지정된 사용자 정의 속성 상속

CSS에서 사용자 정의 속성을 정의할 때 범위 지정은 상속 및 사용에서 중요한 역할을 합니다. 그러나 외부 범위에서 변수를 계산하는 데 사용될 때 범위가 지정된 사용자 정의 속성이 무시되는 상황이 발생할 수 있습니다. 이는 하위 요소 내에서 사용자 정의 속성이 재정의되어 예기치 않은 결과가 발생할 때 발생할 수 있습니다.

범위 지정 설명

사용자 정의 속성은 -- 접두사 및 :root 또는 :host 키워드를 사용하여 특정 요소나 하위 트리로 범위를 지정할 수 있습니다. 범위가 지정된 속성은 요소 또는 해당 하위 항목 내에서만 액세스할 수 있으므로 캡슐화 및 제어된 상속이 가능합니다.

범위가 지정된 속성 및 계산 관련 문제

귀하의 예에서는 다음을 정의했습니다. --size-1, --size-2 및 --size-3의 값을 계산하려면 :root 선택기의 범위가 지정된 사용자 정의 속성 --scale을 사용합니다. 그러나 하위 요소(.scale-1x, .scale-2x 및 .scale-3x) 내에서는 --scale을 다시 정의했습니다. CSS는 위에서 아래로 사용자 정의 속성을 평가하기 때문에 문제가 발생합니다. 사용자 정의 속성이 특정 수준에서 평가되면 중첩된 요소에서 재정의하거나 변경할 수 없습니다.

컴포저블 크기 조정을 위한 CSS 사용자 정의 속성 기술

원하는 목표를 달성하려면 결합 없이 다양한 수준에서 목록을 확장하면 다음 기술을 사용할 수 있습니다.

:root {
  --size-1: calc(1rem * var(--scale, 1));
  --size-2: calc(2rem * var(--scale, 1));
  --size-3: calc(3rem * var(--scale, 1));
}

.size-1, .size-2, .size-3 {
  font-size: var(--scale, 1rem);
}

.scale-1x {
  --scale: 1;
}
.scale-2x {
  --scale: 2;
}
.scale-3x {
  --scale: 3;
}

이 접근 방식에서는 --scale 속성의 범위는 :root 수준으로 유지됩니다. 그러나 글꼴 크기를 계산하는 데 직접 사용하는 대신 .size-1, .size-2 및 .size-3 클래스 내의 var() 함수 내에서 사용합니다. 이를 통해 글꼴 크기가 외부 범위에 설정된 경우 --scale 값을 상속할 수 있습니다. --scale이 제공되지 않으면 기본값인 1rem으로 돌아갑니다.

이 기술을 사용하면 요소를 결합하지 않고도 스케일링 효과를 구성할 수 있습니다. .scale-1x, .scale-2x 및 .scale-3x 클래스를 다양한 목록 요소 또는 그룹에 적용하여 원하는 배율 변형을 얻을 수 있습니다.

위 내용은 범위가 지정된 CSS 사용자 정의 속성이 때때로 계산에 대해 올바르게 계단식으로 배열되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!