CSS 변수

개요

변수란 변하는 값을 나타내는 기호라고 할 수 있다. 자바스크립트나 다른 프로그래밍 언어를 다룰 때 우리는 변수를 선언하고 값을 할당하여 재사용한다.

CSS에서 변수를 사용할 수 있다는 사실은 일단 잠시 제쳐두고 변수가 필요한 경우가 어떤 경우일까 살펴보자

필요성

프론트 웹 프로젝트에서 어떤 색깔을 사용할지 고민하고 있다. 이 것은 서비스를 대표하는 색깔로 버튼 색깔, 밑줄 색깔, 컴포넌트 색깔 등 굉장히 여러곳에서 쓰인다. 만약 네이버와 같은 초록색이라고 해보자.

#00C73C 이 색상 코드를 요소의 css마다 입력해준다. 근데 만약 이런 저런 이유로 서비스의 대표 색깔이 바뀌었다. 그래서 전체 색상을 바꾸어줘야한다. 색상이 쓰인 곳을 하나씩 들여다보며 지우고 새로운 색상코드를 붙여넣고… 이쯤 되면 스마트하지 않다는 생각이 든다.

이런 경우 CSS 변수를 유용하게 사용할 수 있다.

주로 html 요소에 이러한 변수를 선언하는 경우가 많다. 왜냐하면 CSS 변수는 마치 프로그래밍 언어의 변수처럼 유효 범위를 가진다. 그렇기 때문에 한 페이지에서 사용될 공통된 속성을 가장 상위 태그인 html 안에 작성하고 이를 여러 자식요소에서 사용하는 것이다.

사용 방법

사용 방법은 --기호 다음에 변수의 이름을 적고 그 다음 콜론 기호를 적고 변수로 사용할 속성 값을 적는다.

--red: red;

이 것을 사용할 때는 자식 요소에서 다음과 같이 사용하면 된다.

background-color: var(--red);