CSS 변수

브런치 팀 여러분 고정폭 폰트 하나만 넣어주세요.

https://fonts.google.com/specimen/Source+Code+Pro

Google Fonts

CSS에도 변수가 있다. 공식 명칭은 CSS Custom Properties for Cascading Variables Module Level 1.

특히 반복 작업이 많이 일어나는 CSS에서 변수를 사용함으로써 여러 반복작업을 줄여줄 수 있다.

CSS 변수는

(1) 커스텀 속성 정의 부분 (--* 패밀리)

(2) 캐스케이딩 변수 사용 부분 (var() 함수)

이 있다.

커스텀 속성 정의 부분은 캐스케이딩 되기 때문에, :root에 추가해주는 것이 모든 요소에 변수를 정의하는 데에 도움이 된다. 예를 들어 모든 곳에서 사용할 Global 변수를 아래 코드로 정의할 수 있다.

:root {
  --color-link: red;
}

[예제 1] 전역 변수

:root 의사 클래스는 문서의 루트요소를 나타낸다. HTML에서는 보통 html 요소를 지칭한다. CSS 커스텀 속성 정의 부분은 대시 (-) 두개로 시작하며 그 뒤의 이름은 대소문자를 구분한다. 즉 --COLOR와 --color는 서로 다르다.

여기서 이 속성 정의 부분이 캐스케이딩 된다는 부분에 대해서 다시 한번 알아볼 필요가 있다. 즉 조상 요소로부터 변수가 캐스케이딩되어 하위 요소에서 그 속성을 사용할 때 상위 요소를 탐색하여 다시 사용하게 된다.

:root {
  --color-link: red;
}
a {
  --color-link: skyblue;
}

[예제 2] 지역 변수

위 코드같은 경우 a요소를 포함한 하위 요소에서 변수 --color-link는 skyblue를 사용한다.

실행 코드 : http://codepen.io/ChoEun/pen/xgoVVW

CSS variables example 1

캐스케이딩 변수 사용 부분은 var 표기법을 사용하여 변수를 사용한다. 실제로 사용하는 코드 부분에서 호출하여 변수를 사용할 수 있다. 예를 들어 위 코드에서 a 요소에 --color-link를 사용하려면 아래와 같이 사용할 수 있다.

:root {
  --color-link: red;
}
a {
  --color-link: skyblue;
  color: var(--color-link);
}

[예제 3] 실사용

변수명을 지정할 때는 실제로 적용할 CSS 속성에 맞추어 이름을 지정하는 게 중요하며, 유효한 값을 사용할 수 있도록 해야한다. CSS 변수의 지원율은 아래와 같다.

http://caniuse.com/#feat=css-variables

CSS 변수 지원율 (caniuse.com)

CSS 변수는 당장 IE에서 사용이 어렵기 때문에 postcss + postcss-cssnext 같은 도구를 사용하여 구버전에 조금 더 쉽게 대응할 수 있다. 

http://cssnext.io/

레퍼런스

https://www.w3.org/TR/css-variables-1/

CSS Custom Properties for Cascading Variables Module Level 1