CSS variables : CSS에서의 변수 사용

변수(Variable) = 변할 수 있는;

변수는 변할 수 있는 값을 담은 저장소이며, 반복되는 속성 값들을 변수로 선언하고 사용하므로써 CSS 작성이 훨씬 간결해지고 유지보수가 쉬워진다. 그동안 CSS에서의 변수 사용이 IE(Internet Explorer)에서 지원되지 않아 사용하는 경우가 드물었지만, 개발사인 마이크로소프트가 2022년 6월 15일 IE11 지원 종료를 공식적으로 발표하면서 이제 CSS 변수 사용을 원활히 할 수 있게 되었다.

변수 선언

CSS 변수 선언은 원하는 어느 곳에서나 할 수 있지만, 보통 가장 상위 부모인 :root{} 에 전역변수로 선언하여 사용한다. 만약 다른 클래스나 태그 안에 변수를 선언했다면 해당 태그의 자식요소에서만 사용이 가능하다는 것을 기억하자.
변수는 앞에 '-'바를 2개 붙여서 선언해준다.

<style>
      :root{
          --background-color: pink;
          --text-color: white;
          --space: 8px;
      }
</style>

변수의 사용

CSS에서 선언한 변수는 적용할 속성명의 속성값 대신에 선언된 변수명을 'var()'로 감싸서 표현해준다.

<style>
      .class {
          background-color: var(--background-color);
          color: var(--text-color);
          margin-left: var(--space);
      }
</style>

변수 기본값 설정

CSS에서 정의되지 않은 변수를 사용할 경우 해당 속성은 무시되어진다. 이럴 경우 두번째 속성값을 부여하여 변수가 정의되지 않을 시 기본값으로 사용되도록 설정할 수 있다.

        color: var(--text-color, red);

calc() 안에서의 변수사용

CSS에서 기본 제공하는 calc() 계산함수 안에서도 다음과 같이 변수를 사용할 수 있다.

        margin-left: calc(var(--space) * 2);

미디어 쿼리 안에서의 변수사용

CSS 변수는 미디어 쿼리 안에서도 유용하게 사용할 수 있는데, 각각의 속성값을 다시 재정의하지 않고 그저 변수값만 수정해주면 된다.

<style>
      @media screen and (max-width: 768px){
          :root{
                --background-color: blue;
                --text-color: yellow;
                --space: 4px;
          }
      }
</style>

자세한 건 MDN에서 👉
Custom properties (--*): CSS variables