CSS 변수
- CSS에 변수를 만들고 사용할 수 있습니다.
- 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다.
변수 선언
:root {
--variable-name : value;
}
- 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다.
-
만약 어느 곳에서나 사용할 수 있게 하려면
:root에 정의합니다.
변수 사용
property : var( --variable-name )
예제
-
변수 --my-color-1을 red로 설정하고
<h1>의 color에 변수를 사용합니다.
<h1 class="x">Lorem Ipsum Dolor</h1>
:root {
--my-color-1: red;
}
.x {
color: var( --my-color-1 );
}