과거에는 SaSS, LESS, Stylus와 같은
CSS 전처리기를 통해 CSS 변수를 사용하였다.
그러나 최근들어 CSS 자체에 변수를 설정하고
사용할 수 있는 개념이 추가되어
CSS전처리기 없이도 변수를 사용할 수 있게 되었다.
CSS 변수를 지정하는 이유는
반복되는 값의 재사용을 쉽게하기 위함이다.
카카오나 네이버를 보면 사이트의 브랜드를 위해
디자인이나 색상이 통일된 것을 볼 것이다.
루트 요소(:root) 선언
: root 는 CSS에서 가상으로 클래스를 만들어
웹페이지의 문서 구조 트리상에서
루트 요소를 선택하는 것이다.
웹페이지에서 루트는 <html> 이기 때문에
: root 는 <html>과 같다.
: root 에서 선언된 변수 스코프는 전역이다.
그래서 어디서든 불러와서 사용할 수 있다.
자세히 이야기를 하면
style1.css 에서 : root 를 통해 변수를 설정하고
style2.css, style3.css 등 다른 파일에서도
: root 에 선언된 변수를 사용할 수 있다.
CSS에서 변수를 선언하는 방법은
변수명 앞에 --를 붙인다.
CSS 변수 사용
루트 요소에서 선언된 변수를 사용하려면
키워드 var를 통해 접근해서 할 수 있다.
color 속성에 함수 var를 통해
: root에서 선언된 --bold-text-color
rgb(15, 20, 25)를 사용하였다.
CSS 변수 기본값
함수 var는 두번째 인자를 기본값을 받는다.
만일 루트에
--bold-text-color가 선언되어 있지 않다면
black이 color의 속성값으로 지정이 된다.
이 밖에 CSS 변수는 상위 요소의 변수를
하위 요소에서 상속 받을 수 있다.
'CSS' 카테고리의 다른 글
| (CSS) @media에서 Only Screen 과 Screen의 차이 (0) | 2022.01.04 |
|---|---|
| (CSS) 변형-2D Transform, CSS 좌표 체계 (0) | 2021.10.16 |
| (CSS) 태그 id, class로 스타일링 차이 (0) | 2021.09.09 |
| (CSS) 레이아웃 종류(Float, Flexbox, Grid) (0) | 2021.09.02 |
| (CSS) font-size: 62.5%, 왜 기본 페이지의 글꼴을 이렇게 정의할까? (0) | 2021.09.02 |
