[CSS] CSS 변수 사용 방법

css 변수 사용 방법

CSS 변수 란 CSS 속성을 미리 정의해 놓고 필요할 때 참조하여 사용할 수 있는 변수를 의미합니다.

CSS를 사용하다보면 중복되는 값을 반복적으로 사용하는 경우가 많습니다. (색, 글꼴, 폰트 크기, 색, 크기 등등)
이때, CSS 값을 변경해야할 경우 매번 바꿔줘야하는데 사용자 지정 변수를 참조하면 작업 시간을 줄일 수 있습니다.

변수명은 -- + 변수명 형태로 선언합니다.
var(변수명) 함수를 통해 변수를 참조할 수 있습니다.

.container1 {
	--color-primary: red;
    background-color: var(--color-primary);
}

.container2 {
    background-color: var(--color-primary);
}

변수는 선언된 해상 요소를 포함한 후손 요소에만 사용이 가능합니다.

따라서 container1에는 변수가 적용되지만,
container2에는 변수 --color-primary가 적용되지 않습니다.

하지만 전역 선언 시 자신을 포함한 모든 후손요소에서 사용이 가능합니다.
:root 키워드로 전역 변수 영역을 선언할 수 있습니다.

:root {
	—color-primary: red;
}

이때 :root는 html 태그를 지칭하는 가상 선택자 클래스 입니다.
따라서 html 태그 내부에 있는 모든 요소에서 변수를 사용할 수 있습니다.