[CSS] CSS 속성 변수로 사용하기 - (:root / var)

이번 포스팅에서는 CSS에서의 속성값들을 전역변수처럼 사용하는 방법에 대해 알아봅니다.

색상이나 크기 등의 속성값을 정형화하여 관리할 수 있다는 점에서 의미있는 패턴인것 같습니다.

1. 변수선언

 대게 변수는 ":root" 라는 의사 클래스 영역에 정의합니다. 전역 범위로 사용하기 위함입니다,

/* Global */
:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;
  --color-pink: #fe918d;
  --color-dark-pink: #ff6863;
  --color-dark-grey: #4d4d4d;
  --color-grey: #616161;
  --color-light-grey: #7c7979;
  --color-blue: #73aace;
  --color-yellow: #fff7d1;
  --color-orange: #feb546;
  --color-black: #000000;
  --color-favorit-puple: #cca9e0;
  --color-dark-puple: #71279c;

  /* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;

  /* Size */
  --size-border-radius: 4px;

  /* Animation */
  --animation-duration: 300ms;
}

2. 변수값 사용 (var)

정의한 CSS Class에서 각 속성에 var([변수명])으로 값을 할당합니다.

HTML에서 직접 사용한 경우도 동일하게 적용되나, 되려 난잡해 보이는 것 같습니다.

(vscode에서 HTML은 자동완성이 되지 않았습니다.)

# CSS에서의 사용

h1 {
  font-size: var(--font-large);
  font-weight: var(--weight-bold);
  color: var(--color-black);
  margin: 16px 0px;
}

h2 {
  font-size: var(--font-medium);
  font-weight: var(--weight-semi-bold);
  color: var(--color-black);
  margin: 8px 0;
}

# HTML에서의 사용

<h2 style="color: var(--color-white);"> TEST </h2>

3. 예외처리

 정의되지 않은 변수를 사용할 경우, 대체되는 값을 지정할 수 있습니다.

 아래 예제의 경우 "--color-white"가 정의되지 않은 경우 "pink" 값을 부여합니다.

<h2 style="color: var(--color-white, pink);"> TEST </h2>