CSS 변수에 상속된 값을 어떻게 저장합니까?

CSS 변수에 상속 값 저장

CSS에서는 요소의 배경색을 상속받는 등 상속된 값을 기반으로 속성을 조작해야 하는 경우가 종종 있습니다. 의사 요소에 대한 것입니다. 그러나 CSS 변수에 상속 키워드를 사용하는 것이 항상 예상대로 작동하는 것은 아닙니다.

문제

다음과 같은 간단한 예를 고려해 보세요.

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  /* Properties... */
}

.box:before {
  background: var(--color);
  /* Other properties... */
}

이 시나리오에서는 .box 요소에 의사 요소(::before)를 추가하고 --color CSS 변수를 사용하도록 배경 속성을 설정합니다. 그러나 상속 키워드를 사용하여 의사 요소가 .box의 배경색을 상속하도록 하려는 경우 예상대로 작동하지 않습니다.

해결책

상속된 값을 CSS 변수인 경우 속성의 대체 값을 사용할 수 있습니다. 대체 값은 var() 함수의 두 번째 인수로 지정됩니다. 예를 들어:

background: var(--color, inherit);

이렇게 하면 --color 변수가 정의되지 않은 경우 대체 값으로 상속을 사용하도록 배경 속성에 지시합니다.

그러나 우리의 경우에는 --color는 항상 :root 수준에서 정의되기 때문에 이는 작동하지 않습니다. 이 문제를 극복하기 위해 초기 값을 사용하여 사용자 정의 속성 정의를 해제하고 대체 값을 강제로 사용할 수 있습니다.

.box:before {
  background: var(--color, inherit);
  /* Other properties... */
}

/* Undefine --color using the initial value */
.box:before {
  --color: initial;
}

초기 값은 CSS 변수를 비어 있는 초기 값으로 설정합니다. 값. CSS 변수에 초기 값이 있으면 var()는 이를 대체 값이 있는 것으로 처리합니다.

이 접근 방식을 사용하면 상속된 값을 --color CSS 변수에 저장하고 이를 효과적으로 사용할 수 있습니다. 의사 요소의 배경 속성입니다.

위 내용은 CSS 변수에 상속된 값을 어떻게 저장합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!