CSS 변수 선언하기

 

필자가 햇병아리 시절, CSS를 사용하며 많은 불편함을 느꼈던 것 중 하나는 색상 값을 #FFFFFF 혹은 rgb(255,255,255) 처럼 16진수나 RGB 값으로 입력해줘야 했던 것이다.

 

웹 퍼블리싱을 하다보면 색상 값을 잊어먹을 때가 종종 있다. 물론 LESS나 SASS(SCSS) (이하 전처리기)를 쓰게 되면서 이 부분은 해소되었지만 설정을 해야 하는 불편함도 있고, 전처리기를 사용하지 않으면 변수를 어떻게 선언할지 모르는 문제가 있었다.

 

왜 색상 값을 그냥 쓰지 않고 변수에 집착할까?

 

.text {
  color:#000000;
}

.text {
  color:black;
}

 

위 코드를 보았을 때, 어느 색상 값이 더 외우기 편한가? 개인마다 편차는 있겠지만 대부분 단어로 된 경우가 더 외우기 쉬울 거다.

 

웹 퍼블리싱을 해서 10줄, 100줄이 넘어가기 시작하면 색상 값을 디자인 파일에서 찾아서 넣게 되는데, 공통적인 색상 값은 한번에 처리하게 되면 작업 효율이 올라간다. 그리고 나중에 메인 색상 값이 바꼈을 때, 한번에 바꿀 수 있는 편리함도 있다.

 

즉 코드를 더 수월하게 유지보수할 수 있도록 변수를 사용하는 것이다. 그리고 웹 퍼블리싱을 진행하다 보면 색상 값이 기억이 나지 않는 경우도 종종 있는데, 변수명으로 설정해두면 까먹을 일이 거의 없었다.

 

그런 이점 때문에 전처리기 없이도 CSS에 변수를 선언하는 방법을 찾아보았다.

 

1. :root

CSS에는 많은 가상 선택자가 존재한다. 대표적으로 :before, :after, :placeholder 등이 있다. 그 중에서 :root는 최상위의 의미를 가진 가상 선택자다. CSS도 부모-자식 관계로 이루어져 있어 접근에 제한이 있다.

 

예를 들어보자.

 

<style>
.foo .child {color:#eee;}
.parent .child {color:#000;}
</style>

...
<div class="parent">
  <p class="child">텍스트</p>
</div>
...

 

p 태그의 텍스트 색상 값을 바꾸는 CSS인데, parent 엘리먼트 안에 있는 child만 색상이 #000 색으로 바뀌게 된다. foo 라는 클래스를 가진 엘리먼트는 없기 때문이다.

 

하지만 :root를 사용하여 변수를 선언해두게 되면, 부모-자식 관계에 상관없이 어디서든 지정해둔 값을 쓸 수 있게 된다.

 

:root {
  --main-color: #000;
}

 

위와 같이 설정해두면 --main-color에 #000이 담기게 되고, 다른 색상 값을 나타내는 CSS에 --main-color를 사용할 수 있게 된다.

 

2. 사용법

그렇다면 사용 방법의 예시를 한번 보자.

 

:root {
  --main-color: #000;
}

.parent .child {
  color: var(--main-color);
}

 

:root에 --main-color라는 변수를 선언하고 값을 지정하면, 위 parent child의 색상 값을 --main-color에 저장된 값으로 변경된다.

 

변수명을 지정할 때는 하이픈(-) 두 개를 앞에 붙이고 클래스명을 짓듯이 자유롭게 지으면 된다. 그리고 다른 CSS에서 사용할 때는 변수Variable의 약자인 var(변수명)을 넣어 값을 넣어준다.

 

이제 공통 색상은 :root 안에 변수화를 해두고 편리하게 사용할 수 있게 됐다.