CSS var() 함수는 CSS 저작자가 정의하는 개체로, 사용자 지정 속성 또는 'CSS 변수' 값을 다른 속성의 값으로 지정할 때 사용
어떤 용도로 사용될까?
웹사이트가 복잡해질수록 어마어마한 양의 CSS를 가지게 되고, 많은 값을 반복적으로 사용한다. 만약 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색상을 바꿔야 할 상황이 왔을 때 일일히 값을 바꾸는 수고로움을 감수해야 할 것이다.
ex)
:root {
--main-bg-color: pink; // root에서 main-bg-color라는 이름으로 pink 색상값을 지정
}
body {
background-color: var(--main-bg-color); // body의 background color를 main-bg-color와 같은 값으로 지정
}이럴 때 위의 예시와 같이 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조해갈 수 있으며, 색상값 대신 --main-bg-color와 같이 의미를 가지는 식별자를 사용하여 보다 효율적인 프로그래밍이 가능해진다.
이렇듯 사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 var() 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공한다.
사용 방법?
변수를 -- 표기로 정의하고
ex) --main-color: white;var(변수명) 형식을 사용해 접근할 수 있다.
ex) color: var(--main-color);사용자 지정 속성도 다른 일반적인 속성과 마찬가지로 규칙 집합 내에 작성하며 규칙 집합의 선택자는 사용자 지정 속성을 사용할 수 있는 범위를 정의한다.
-
흔히 보이는 패턴은 :root 의사 클래스에 선언해서 사용자의 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성하는 것이다. :root와 html은 같다고 볼 수 있다.
-
또한, 요소마다 지역 변수로서 활용할 수 있다. 지역변수로 선언된 CSS 변수는 변수명이 같더라도 전체 요소에 공유되지 않고 오로지 해당 요소에서만 적용된다.
ex)
div {
--font-color: #000f22; // CSS 지역 변수 선언
color: var(--font-color); // CSS 변수 사용
}
p {
--font-color: #000fff; // CSS 지역 변수 선언
color: var(--font-color); // CSS 변수 사용
}- HTML에서 자식 element에 값이 지정되지 않은 경우 부모 element의 값을 상속받는데, CSS 변수로 선언된 값도 이처럼 부모의 값이 상속된다.
<div class='first'>
<div class='second'></div>
<div class='third'></div>
</div>
.first {
--example: 10px;
font-size: var(--example);
}
.second {
--example: 1rem;
font-size: var(--example); // 1rem
}
.third {
font-size: var(--example); // 10px, first에서 변수를 상속 받음
}- 변수값이 지정되지 않았을 경우를 대비하여, 아래와 같이 default 값을 지정할 수도 있다.
color: var(--main-color, yellow); // 변수값이 지정되지 않아 yellow로 디폴트 값을 지정