🖊️CSS에는 변수 기능이 있다. 변수를 선언할 때는 변수 맨 앞에 --를 붙여주자.
:root {
--main-font-color: #000f22; /* CSS 전역 변수 선언 */
}div {
color: var(--main-font-color); /* CSS 변수 사용 */
}여기서 보면 알겠지만 변수를 호출할 때는 VAR를 사용한다.
ROOT에서 css변수를 선언해서 html문서 어디에서나 접근할 수 있도록 구성한다.
css는 변수명이 같더라도 그 요소에서만 적용이 가능하다. 예를 들어 div태그에서 css를 선언했다면 그 css는 div태그 안에서 동작하는 css이며, 태그가 div가 아닌 p태그로 바뀐다면 변수명이 같더라도 다른 요소에서 동작한다.
css변수가 너무 많아서 특정 변수가 정의가 되었는지 잘 모르겠다면 var을 중첩시켜서 여러개의 대체 변수를 정의할 수 있다.
요소의 배경 이미지 경로를 변수로 처리해야 할 때도 주의해야 한다. 이미지 경로만을 변수에 설정하고 url(var(--img))이러한 형식으로는 문법적으로 틀렸다.
따라서 :root {
--img: url("img/sample.jpg");
}
div {
background: var(--img);
}
이러한 형태로 사용해야 한다.
css변수 상속받기
만일 html에서 자식 엘리먼트에 값이 지정되지 않은 경우 부모 엘리먼트의 값을 상속하는데, css도 예외없이 상속된다.
//상속받기
<div class='one'>
<div class='two'></div>
<div class='three'></div>
</div>
.one {
--test: 10px;
font-size: var(--test);
}
.two {
--test: 2rem;
font-size: var(--test); /* 2rem */
}
.three {
font-size: var(--test); /* 10px */ /* .one에서 변수를 상속 받음 */
}자바스크립트로 css변수값 얻어오는 방법
만약 :root{
--hover: red;
}이런 형식으로 선언한 변수의 값을 얻어오고 싶다면
let root= document.querySeletor(':root');이런 형식으로 가상 클래스의 요소를 얻어온다.
let variables = getComputedStyle(root); getComputedStyle로 해당 요소에 전역적으로 적용되어 있는 모든 형태의 style을 반환
variables.getPropertyValue('--hover'); 변수값 얻기
