CSS의 변수(Variables)

변수란? 

변하는 값을 '변수'라고 합니다. 부가세를 계산하는 프로그램을 만든다고 예를 들어보겠습니다.

부가세 = 입력 금액 * 0.1 

 

금액을 입력하면 0.1을 곱해서 부가세가 얼마인지 계산을 해주겠지요. 이 때  '입력 금액'은 사용자가 입력하는 값이니 언제든 바뀔 수 있습니다. 입력 금액에 따라 계산 결과값은 달라지기 때문에 '부가세'도 바뀔 수 있지요. 이렇듯 바뀔 수 있는 값을 담는 공간을 '변수'라고 합니다. 

 

CSS의 변수는 왜 필요한가?

CSS의 문법은 무척 쉽습니다. 아래와 같이 단조로운 구성으로 되어 있습니다.

.클래스 { 프로퍼티 : 프로퍼티 속성; }
#아이디 { 프로퍼티 : 프로퍼티 속성; }

 

작성하기 쉬운 문법은 CSS의 큰 장점입니다. 쉽게 웹페이지를 생성하고 디자인할 수 있다는 점에서 진입장벽을 많이 낮춰주었습니다. 장점이라 느꼈던 쉬운 문법이 오랜 기간 사용되면서 발목을 잡았습니다. 같은 값을 여러 번 반복해서 사용하는 경우 시스템의 유지보수 난이도(난이도라 쓰고 노가다라 말합니다)를 높혔기 때문입니다. 

네이버의 주요 컬러는 녹색입니다. 그런데 어느 날, 네이버 브랜딩 리뉴얼을 진행하며 네이버의 로고가 파란색으로 변경되었다면 어떤 일이 일어날까요?

로그인 버튼, 각 메뉴에 탭이 active 상태일 때의 녹색 배경색, 새 메일의 갯수를 알려주는 녹색 풍선, 새 쪽지의 갯수가 몇 개인지 알려주는 녹색 볼드체의 글씨, 결제하기 버튼, Top 버튼이 focus 상태일 때 나오는 컬러 등 수 많은 컬러를 녹색에서 파란색으로 변경해주어야 합니다. 그러면 디자이너들은 열심히 그 색상코드를 찾아서 일일히 변경해주어야 합니다. 

 

같은 값을 여러 번 사용해야 할 때 '변수'는 그 빛을 발합니다.

 

---

CSS에서 변수 기능이 없을 때의 대안 - SASS, SCSS 등 전처리기

CSS를 프로그램 언어처럼 사용할 수 있는 방법이 없진 않습니다. less, SCSS, Stylus 등 전처리기라고 불리는 언어가 있기 때문입니다. 전처리기는 CSS의 단점을 보완한 문법을 사용합니다. 변수, 중첩, 함수 등 프로그램 언어의 장점을 차용하여 코드를 작성하고 컴파일러를 통해 CSS 파일을 생성해줍니다. 실제로 웹사이트에는 컴파일이 완성된 CSS 파일을 링크해서 사용하기 때문에 브라우저 호환성에도 문제가 없습니다.

CSS 전처리기

 

여러 전처리기 중 SCSS(Syntactically Awesome Style Sheets)는 CSS와 문법이 거의 흡사해 배우기도 쉽습니다. 변수, 중첩, mixin, extend 등의 기능을 이용하면 유지보수가 용이한 코드를 작성할 수 있습니다. VSCode에서는 SCSS 작성을 돕는 플러그인도 상당수 있기 때문에 작업의 효율성을 높이는데 도움을 받을 수 있습니다. 단점이라고 느꼈던 것은 두 가지 입니다. 

 

• CSS에 숙련도가 있는 사람은 쉽게 배울 수 있지만 신입 UX 디자이너에게 컴파일의 개념부터 가르쳐야 합니다. 그들은 변수나 컴파일에 대한 개념을 거의 접해본 적이 없습니다. 업무파악하기에도 머리가 복잡한데, 프로그래밍 기초까지 공부해야 하는 셈이죠.
• 번거로움 입니다. 컴파일을 하는 데에 1~3초 정도의 시간 밖에 걸리지 않지만, 그 시간을 기다리는 것도 서버에 업로드하기 전 한 단계의 절차가 더 있다는 것이 번거로울 수 있습니다.

---

CSS3 이후의 발전

과거에는 CSS를 버전 별로 발표했습니다. CSS, CSS2, CSS3의 순으로 발전을 했고, 그 이후로는 버전에 숫자를 붙이지 않습니다. 브라우저 간의 호환성이 최대 과제였던 과거와는 다르게 모바일과 태블릿PC의 발달로 과거에는 없었던 개념이 많이 생겨났습니다. CSS3 이후로는 버전별로 명세를 공개하는 것이 아닌 모듈별로 새 속성을 공개하는 방식으로 변경되었습니다.

 

CSS에도 변수 개념이 탄생 

그리하여 전처리기를 이용해야만 사용이 가능했던 '변수'에 대한 개념이 CSS에도 도입되었습니다. 

변수는 아래와 같이 사용이 가능합니다.

:root {
	--main-color: green;
}

div.item {
	background-color: val(--main-color);
}

 

:root 안에 변수명과 값을 지정하고, 정의한 값을 다른 속성에서 불러와 쓸 수 있습니다. 실제로 코드를 어떤 식으로 사용하는지 살펴보겠습니다.

 

See the Pen Untitled by flexbox (@flex-grow) on CodePen.

 

html 코드를 보면 같은 heading이라는 클래스를 가진 h2 태그의 글자색이 다른 것을 알 수 있습니다. 

:root {
  //root에는 전역변수를 지정할 수 있다.
  --primary-color:#d640f1;
}
div.contents { 
  // div.contents 안의 변수는 지역변수의 값을 지정할 수 있다.
  --primary-color:#3409d7;
  --error-color:#ed1130;
}
.heading {
  color: var(--primary-color);
}
.error {
  color: var(--error-color);
  font-size:12px;
}

• 전역변수 : 어느 곳에서도 호출해서 사용할 수 있는 변수
• 지역변수 : 지정된 위치에서만 호출이 가능한 변수

<div class="contents">
  <!-- div.contents 안에서만 호출이 가능한 지역변수가 적용되어 글자색이 보라색으로 나타난다. -->
  <h2 class="heading">flexbox의 블로그에 오신 것을 환영합니다.</h2>
  <p>이 블로그는 UX 디자이너가 운영합니다.</p>
  <p class="error">* 정회원 이상 열람이 가능합니다.</p>
</div>

<!-- 전역변수의 --primary-color를 적용해 글자색이 핑크색으로 나타난다. -->
<h2 class="heading">두번째 제목입니다.</h2>

 

프로그램 언어를 작성할 때는 전역변수의 사용을 신중하게 해야 하는 경우들이 자주 있습니다. 시스템 전체에 영향을 미치기 때문입니다. 하지만 디자인 분야에서는 그보다는 더 심플하게 사용이 가능합니다. 웹사이트의 통일성을 위한 컬러값, 패딩, 마진의 값 등을 전역 변수로 지정한 후 사용하고 예외적인 상황이 발생하는 경우 지역 변수를 활용할 수 있을 것 같습니다.

 

CSS 문법을 이용한 응용방법

CSS는 Cascading Style Sheet의 약자입니다. Cascading의 사전적 의미는 '계단식으로, 폭포처럼 떨어지다' 입니다. CSS의 속성을 그대로 이해할 수 있는데요. 위에서부터 아래로 순차적으로 적용되기 때문입니다. 아래와 같이 엘리먼트에 중복으로 스타일을 지정한 경우, 아래쪽 줄의 영향을 받습니다.

p { color:red; }
p { color:black; }

이런 특징을 이용하면 변수를 활용해 다음과 같은 코드를 작성할 수 있습니다. 

"글자색을 --primary-color 컬러로 표시하되, 그 변수가 지정이 되어있지 않다면 blue 컬러로 보여줘라" 라고 해석이 가능합니다.

.heading {
  color: var(--primary-color, blue);
}

 

 

CSS 사용자 변수 브라우저 호환성

호환성을 살펴보면 2017년 4월 이후부터 모든 브라우저에서 호환이 가능합니다.