CSS 사용자 속성 변수 사용하기

CSS 변수란?

놀랍겠지만 SCSS, SASS처럼 CSS도 변수를 지원한다.
지원 한지는 꽤 되었지만, 국내에서 적용을 못했던 이유는 바로 인터넷 익스플로러 때문이다.
필자도 프로젝트를 하면서 IE11을 크로스브라우징 해달라는 요청이 많이 받았었다.
하지만 2021년 8월에 IE11의 지원이 중단되면서, 변수를 사용할 수 있게 되었다.

CSS 변수는 CSS에서 사용되는 값을 저장하고 재사용할 수 있도록 하는 기능이다
CSS 변수는 사용하기 전에 정의되어야 하며, 변수 이름 앞에 두 개의 대시 기호(--)를 사용하여 정의된다.

 

변수 선언

변수선언 방법은 간단하다

 --변수명: 값;

변수를 어디에 선언하느냐에 따라서 전역변수와, 지역변수로 나뉘게 된다.

전역변수 선언은  root에 선언을 하면 된다.

:root{
    --color: white; 
}

 

반응형

지역변수 선언은 선택자에 선언을 하면 된다.

선택자{
    --color: white;
}

변수 사용방법

변수를 사용함으로써 재사용성과 유지보수가 향상되고, 스타일을 쉽게 수정하고 일관된 디자인을 유지할 수 있다.
선언한 변수 사용방법은 var(--변수명)으로 사용하면 된다.

div{
  color:(--color)
}

CSS 변수의 기본 값 설정

CSS변수 사용시 변수가 선언되어 있지 않을 때, 원치 않는 속성이 적용될 수 있는데, 이때 변수에 기본 값을 넣어 원치 않는 속성이 적용되지 않게 하는 방법이다.

사용방법은 변수명 옆에 var(변수, 값)이렇게 사용해주면 된다.

div{
  color:(--color, black)
}

위와같이 변수를 사용하게 되면, --color값이 없을 때 color값은 black가 된다.

오늘의 포스팅은 여기까지 입니다.
끝까지 읽어주셔서 감사합니다.