CSS / 변수 사용하기

CSS 변수

CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다.

변수 선언

변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.

변수 사용

예제

  • 변수 --my-color-1을 red로 설정하고 사용합니다.

  • 정의하지 않은 변수를 사용하면, 그 속성을 사용하지 않은 것과 같은 효과를 냅니다.

  • 변수가 정의되지 않았을 때 사용할 값을 정할 수 있습니다.
  • --my-color-2가 정의되지 않았으므로 orange가 사용됩니다.

  • 특정 선택자에 변수를 선언하면 그 선택자가 적용되는 요소와 그 하위 요소에서 변수를 사용할 수 있습니다.
  • .x에 정의된 --my-color-1은 .y에서는 사용할 수 없습니다.

브라우저 지원

CSS의 변수 사용은 유용한 기능이지만, 지원하지 않는 브라우저들이 있습니다. 특시 IE는 11도 지원하지 않습니다.

https://caniuse.com

CSS 강좌