css 변수 사용하기

style.css

:root {
  --a: pink;
  --b: black;
  --c: white;
}

button {
  background-color: var(--a);
}

/* 변수 --a 를 오버라이딩 */
button.override {
  --a: green;
  background-color: var(--a);
}

• :root는 전역 변수를 선언하는 곳이라고 생각하면 된다
• --을 앞에 붙여야 한다
• 대소문자를 구분한다
• var()함수로 변수를 가져다 사용할 수 있다
• 오버라이딩 가능하다

style.css

button {
  background-color: var(--a, red);
}

• var() 함수에 2번째 인자를 넣어서, 대안 값을 지정할 수 있다
• --a가 정의되지 않았을 때, 두 번째 인자 값을 사용한다

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
• :root는 의사 클래스라고 한다