[CSS] var()

var()

사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속서의 값으로 지정할 때 사용

var(--header-color, red);

 

값이 아닌 속성이름, 선택자 등 다른 곳에 사용할 수 없다.

시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계 없는 값이 된다.

 

첫번째 인수는 값을 가져올 사용자 지정 속성의 이름이다.

선택적으로 제공할 수 있는 두번째 인수는 대체값이다. 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용한다. 

대체 값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용한다.
var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue이다.
=> 첫번째 쉼표 뒤쪽은 모두 대체값이 된다. 

 

<custom-property-name>

두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자

 

<declaration-value>

현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값

 

✍🏻 한번 더 좀 더 쉽게 설명

 

var(--변수 이름, 대체 값)

name	필수 항목, 변수 이름 (반드시 두 개의 대시 --로 시작해야 함), 대소문자를 구별
value	선택 항목, 대체 값 (변수가 발견되지 않았을 때 사용됨)

 

변수는 상속되기 때문에 :root에 정의하면 전역으로 사용할 수 있다.

:root {
  --main-color: #3498db;
}

body {
  background-color: var(--main-color, #cccccc); /* --main-color가 없으면 회색 사용 */
}