변수

변수는 프로그래밍 언어에서 사용하는 변할 수 있는 값을 담은 저장소를 말하며 고유의 이름을 가지며, 연산이나 프로그램 로직에 반복적으로 사용할 수 있습니다.

이러한 변수를 CSS도 지원합니다.

CSS 속성을 미리 정의해 놓고 필요할 때, 참조하여 사용할 수 있는 변수를 의미합니다.
CSS를 사용하다보면 중복되는 값을 반복적으로 사용하는 경우가 많습니다. (ex: 폰트, 폰트 크기, 색, 크기 지정 등)
그리고 css 값을 변경해야할 경우 일일이 바꾸어 주어야하는데 사용자 지정 변수를 참조하면 이러한 수고를 덜 수 있습니다.

변수 선언 방법

1. 전역 선언

변수를 전역 선언 시 어디서든지 값을 참조할 수 있습니다.

:root 키워드로 전역 변수 영역을 선언할 수 있고, 변수명은 -- + 변수명 형태로 선언합니다.

:root {
  --color-primary: royalblue;
  --color-danger: red;
  --color-success: yellowgreen;
}

2. 선택자 범위 선언

선택자가 적용되는 요소와 하위 요소에서만 변수를 참조할 수 있으므로 주의해야 합니다.

.header {
   --font-size : 12px;
   --font-color : gray;
}

.header div {
   font-size : var(--font-size);
   color : var(--font-color);
}

.content {
   font-size : var(--font-size); /*적용되지 않음*/
   color : var(--font-color); /*적용되지 않음*/
}

---

변수 사용 방법

선언한 CSS 변수 사용은 간단합니다.

변수 값을 적용할 속성 값 위치에 var()로 변수명을 감싸서 표시하면 됩니다.

정의되지 않은 변수를 사용하는 경우 해당 속성은 무시됩니다.

:root {
  --color-primary: royalblue;
}

.primary {
  background-color: var(--color-primary); /* 전역 변수의 참조 */
  background-colir: var(--color-danger); /* 정의되지 않은 변수 참조에 의해 무시 */
}

---

변수 기본 값 설정

CSS 변수 사용시 변수가 정의되지 않은 경우 해당 속성은 무시되기 때문에, 이런 경우를 위해 변수를 적용할 때 변수가 정의되지 않은 경우 기본 값을 설정할 수 있도록 배려를 하고 있습니다.

속성 적용시 다음과 같이 2번째 파라메터로 속성 값을 설정하면 변수가 정의되지 않았을 때 기본 값이 적용되도록 할 수 있습니다.

.success {
  /* 상위에 선언된 변수 없으므로 변수의 초기값으로 orange 설정 */
  background-color: var(--color-success, orange); 
}

---

참고자료

• https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties