CSS 사용자 지정 속성(--*): CSS 변수

CSS에서, --example-name처럼 --로 시작하는 이름의 속성은 다른 선언들에서 var() 함수로 참조할 수 있는 값을 포함하는 사용자 지정 속성을 나타냅니다.

사용자 지정 속성은 선언이 선택한 요소들의 내부로 범위가 한정되며 다른 CSS 속성들처럼 종속과 상속 대상입니다. 단, @property @규칙의 inherits 서술자가 false면 상속 대상에서 제외됩니다.

구문

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20 32 54);

<declaration-value>: 한 개 이상의 CSS 토큰으로 구성된 아무 시퀀스나 지정할 수 있습니다. 단, 잘못된 문자열, 잘못된 URL, 열리지 않은 닫힌 괄호 등 유효하지 않은 토큰은 사용할 수 없습니다. 즉, 임의의 선언에 대해 사용할 수 있는 모든 값입니다.

사용자 지정 속성 이름은 대소문자를 구별하므로 --my-color와 --My-Color는 서로 다른 속성입니다.

예제

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

.first {
  background-color: var(--first-color);
  color: var(--second-color);
}

.second {
  background-color: var(--second-color);
  color: var(--first-color);
}

.container {
  --first-color: #290;
}

.third {
  background-color: var(--first-color);
  color: var(--second-color);
}

<p class="first">파란 배경에 노란 글자입니다.</p>
<p class="second">노란 배경에 파란 글자입니다.</p>
<div class="container">
  <p class="third">초록 배경에 노란 글자입니다.</p>
</div>

불러오는 중...

명세

CSS Custom Properties for Cascading Variables Module Level 1

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
--*
`env()`
Safe area inset variable `safe-area-inset-bottom`
Safe area inset variable `safe-area-inset-left`
Safe area inset variable `safe-area-inset-right`
Safe area inset variable `safe-area-inset-top`
Window Controls Overlay variable `titlebar-area-height`
Window Controls Overlay variable `titlebar-area-width`
Window Controls Overlay variable `titlebar-area-x`
Window Controls Overlay variable `titlebar-area-y`
`var()`