[CSS] 사용자 지정 속성, 변수, Variables 사용하기

CSS에서 자주 사용하는 값은 변수에 저장해놓고 사용하자.

---

기본적인 문법

div {
  --default-font-color: red;
}

p {
  color: var(--default-font-color);
}

div에서 변수를 선언하고, p에서 변수를 사용한다. 이때, 변수의 범위는 변수를 선언한 그 자신과 하위 요소로 제한된다.

<div>
  <p>첫 번째 단락</p>
</div>
<p>두 번째 단락</p>

즉 이러한 문서가 있을 때, 첫 번째 단락은 변수가 적용되어 빨간색으로 나오지만, 두 번째 단락은 변수가 적용되지 않아 기본 색상으로 표시된다.

p {
  color: var(--default-font-color, blue);
}

변수가 적용되지 않을 것을 대비해 대체 값을 지정할 수도 있다.

사용법

:root {
  --default-font-color: red;
}

CSS에서는 :root에 변수를 선언해놓고 전역적으로 사용하는 것이 일반적이다.

예시

<div>
  <p>첫 번째 단락</p>
</div>
<p>두 번째 단락</p>

:root {
  --default-font-color: red;
}

div {
  --default-font-color: blue;
}

p {
  color: var(--default-font-color);
}

하위 선택자에서 같은 이름의 변수를 다시 선언한다면 하위 선택자의 변수가 우선되어 첫 번째 단락은 파란색, 두 번째 단락은 빨간색으로 표시된다.

참조

• 사용자 지정 CSS 속성 사용하기 (변수)