[CSS] CSS 변수 등록하기

✨ CSS 변수 등록 하는 방법

:root {
  --primary-100: #3692ff;
  --gray-900: #222;
}

:root에 --속성이름: 값 형태로 변수를 등록할 수 있다.

:root를 사용하는 이유는 HTML 문서 어디에서나

사용자 지정 속성에 접근할 수 있도록 구성하기 위해서 사용한다.

 

만약 범위를 제한해야 하는 경우

:root 대신 다른 클래스 값을 입력해도 된다.

 

🎨 등록한 변수 사용하기

@import './variables.css'

.container {
  color: var(--gray-900);
}

내 변수 파일을 불러온 뒤에

var(변수명) 형태로 사용해주면 된다.

 

매번 @import를 입력해주는게 번거로울 것 같아서

나는 모든 html에 공통으로 들어가는 common.css에

해당 @import 구문을 추가해주었다.

 

📚 참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN