[CSS] 사용자 지정 CSS 속성 (custom properties)

사용자 지정 CSS 속성 (custom properties)

CSS에 직접 변수를 만들어 사용할 수 있다.

 

장점

• 반복되는 CSS 값을 변수화 하면 일괄적으로 변경할 수 있다.
• 속성 값에 의미를 부여하기 때문에 코드를 이해하기 쉬워진다.

 

선언

• 변수명은 --로 시작하며 뒤에 어떠한 이름이든 올 수 있다.
• 대소문자를 구분한다. --bg-color와 --Bg-color는 서로 다른 속성으로 취급된다.
• 어느 곳에서나 사용할 수 있게 하려면 :root에 정의한다.
• 특정 선택자에 변수를 선언하면 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있다.

:root {
  --main-bg-color: brown;
}

element {
  --bg-color: brown;
  --Bg-color: black;
}

 

사용

var()로 변수명을 감싸서 사용한다.

element {
  background-color: var(--main-bg-color);
}

 

대체 변수

만약 변수가 정의되지 않았을 땐 var()의 2번째 인자로 대체 변수를 지정할 수 있다.

.container {
  color: var(--my-var, red); /* --my-var가 정의되지 않았을 때 red로 표시 */
}