CSS에서 변수 사용하기

CSS 커스텀 프로퍼티 — 변수의 기본 사용법

CSS 변수는 정말 유용합니다. 스타일시트의 중복을 줄여 코드가 짧아지고, 한 줄만 바꾸면 그 변수를 참조하는 모든 곳에 반영돼 작업 효율도 올라갑니다 — 더 이상 Ctrl+F로 같은 값을 하나씩 찾아 고칠 필요가 없습니다.

해야 할 일

1. 스타일시트 상단에 변수를 선언하고 값을 지정합니다.
2. CSS에서 그 변수를 참조합니다.

이 디자인 포트폴리오를 운영한 지 1년쯤 됐습니다. 폰트 크기나 배경 색을 바꿔야 할 때마다 Ctrl+F로 같은 값을 하나씩 찾아 고치곤 했는데, CSS 변수를 알고 난 뒤로 이 작업이 사라졌습니다. 사용법을 정리해봤습니다.

기본 사용법

선언

:root 가상 클래스는 선택자로 동작합니다. 스타일시트 상단에서 --var-name처럼 변수 이름을 선언하고 값을 할당합니다.

참조

이제 어디서든 var()로 변수를 참조할 수 있습니다.

이렇게 하면 모든 p 태그가 --paragraph-color로 색칠됩니다. 변수의 장점은 한 번 선언해두면, 원하는 만큼 어디서든 재사용할 수 있다는 점입니다. 수정도 선언부의 값만 바꾸면 됩니다.

위 예시에서 두 태그와 한 클래스에 --paragraph-color를 참조했습니다. 모두 :root에 설정한 값인 #656c7a가 적용됩니다.

--paragraph-color를 바꾸고 싶다면 스타일시트의 모든 위치를 찾을 필요 없이, :root의 값만 바꾸면 그 변수를 참조하는 모든 줄이 함께 바뀝니다.

응용

CSS 변수는 계산에도 사용할 수 있습니다. 숫자를 담은 변수는 다양한 방식으로 활용할 수 있습니다.

위 예시에서 --font-size를 정수 1로 선언했습니다. 그대로 사용할 수도 있지만, calc()로 다른 값을 도출할 수도 있습니다.

--font-size의 값은 정수 1입니다. 3을 사용하고 싶다고 변수를 새로 선언하는 것은 비효율적입니다. 더 깔끔한 방법은 var()와 함께 calc()를 사용해 기존 변수에서 새 값을 도출하는 것입니다. 이 경우:

• margin-top = 16px
• font-size = 3rem
• line-height = 1.5em

이렇게 하면 하나의 변수를 여러 값으로, 여러 속성에서 재사용할 수 있습니다. calc()는 더하기, 빼기, 곱하기, 나누기 같은 모든 연산자를 지원합니다.

See the Pen CSS3 custom properties by Hyouk Seo (@Spemer) on CodePen.

브라우저 호환성

이 글을 쓰는 시점(2017년 11월 18일) 기준, caniuse.com에 따르면 76.28%의 브라우저가 CSS 변수를 완전 지원하고 1.62%가 부분 지원입니다. 최신 정보는 caniuse.com에서 확인할 수 있습니다.

caniuse.com 사용률 리포트

마치며

이 사이트에 CSS 변수를 어떻게 사용했는지는 GitHub에서 확인할 수 있습니다.

Sass나 Less 같은 CSS 전처리기에 익숙하지 않다면 CSS 변수가 훌륭한 대안입니다 — 배우기 쉽고, 사용하기 쉬우며, 의외로 강력합니다. 그래서 저도 스타일시트를 CSS 변수 기반으로 전환했습니다.

읽어주셔서 감사합니다.