폴백과 함께 CSS 변수를 사용하여 값을 상속하는 방법은 무엇입니까?

CSS 변수 내에서 값을 상속하는 방법

사용자 정의 속성이라고도 하는 CSS 변수를 사용하면 전체에서 재사용할 수 있는 방식으로 값을 저장하고 조작할 수 있습니다. 스타일시트. 그러나 CSS 변수의 한 가지 제한 사항은 상위 요소에서 값을 상속할 수 없다는 것입니다.

문제

예를 들어 다음 코드를 고려해 보세요.

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

이 코드에는 rgba(20, 20, 20, 0.5)의 기본값을 사용하여 --color 변수를 정의하는 :root 규칙이 있습니다. 또한 직사각형 요소에 대한 일부 스타일을 설정하는 .box 클래스와 상자 내부에 원형 요소를 생성하는 :before 의사 요소가 있습니다.

:before 의사 요소의 배경 속성이 설정됩니다. var(--color)로 변환합니다. 이는 --color 변수의 값을 상속한다는 의미입니다. 그러나 다음 예와 같이 인라인 스타일을 사용하여 각 상자에 대한 --color 변수의 값을 재정의할 수 있습니다.

<div class="box red">

처음 두 상자에는 --color 변수가 다음으로 설정됩니다. rgba(0, 255, 0, 0.5) 및 rgba(0, 255, 255, 0.5) 각각, 세 번째 상자는 상위 요소에서 --color 변수를 상속하려고 시도합니다. 그러나 앞서 언급했듯이 CSS 변수는 값을 상속받을 수 없으므로 세 번째 상자의 --color 변수는 기본값인 rgba(20, 20, 20, 0.5)로 유지됩니다.

해결 방법

var() 함수는 변수가 정의되지 않았거나 초기 값으로 설정된 경우 CSS 변수에 대한 대체 값을 정의하는 방법을 제공합니다. 대체 값은 다음 예에 표시된 대로 var() 함수에 대한 두 번째 인수로 지정됩니다.

background: var(--color, inherit);

이 예에서 --color 변수가 정의되지 않았거나 해당 값으로 설정된 경우 초기값이면 배경 속성은 상위 요소의 색상을 상속합니다. 이것이 바로 이 경우에 우리가 원하는 동작입니다.

다음은 대체 값이 추가된 업데이트된 코드입니다.

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color, inherit);
  filter: invert(1);
}

이제 세 상자 모두 상위 상자의 색상을 상속합니다. --color 변수가 인라인 스타일에서 다른 값으로 설정된 경우에도 요소입니다.

위 내용은 폴백과 함께 CSS 변수를 사용하여 값을 상속하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!