폴백과 함께 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">
<p>처음 두 상자에는 --color 변수가 다음으로 설정됩니다. rgba(0, 255, 0, 0.5) 및 rgba(0, 255, 255, 0.5) 각각, 세 번째 상자는 상위 요소에서 --color 변수를 상속하려고 시도합니다. 그러나 앞서 언급했듯이 CSS 변수는 값을 상속받을 수 없으므로 세 번째 상자의 --color 변수는 기본값인 rgba(20, 20, 20, 0.5)로 유지됩니다.</p>
<h3 id="해결-방법">해결 방법</h3>
<p>var() 함수는 변수가 정의되지 않았거나 초기 값으로 설정된 경우 CSS 변수에 대한 대체 값을 정의하는 방법을 제공합니다. 대체 값은 다음 예에 표시된 대로 var() 함수에 대한 두 번째 인수로 지정됩니다.</p>
<pre class="brush:php;toolbar:false">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 변수가 인라인 스타일에서 다른 값으로 설정된 경우에도 요소입니다.