CSS variables

September 08, 2020

How to use Custom properties CSS variables

var()

Custom properties (—*): CSS variables

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

와 —같이 접두사가 붙은 속성 이름 은 함수를 사용하는 다른 선언에서 사용할 수있는 값을 포함하는 사용자 지정 속성 을 —example-name나타낸다.

:root {
  --main-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

정의 : 사용자 지정 속성은 전용 표기법을 사용해 정의 (--main-color: black;)
사용 : var() 함수를 사용해 접근 가능 (color: var(--main-color);)

장점

재사용할 임의의 값을 저장하여 다른 곳에서 참조하여 사용 가능
#00ff00보다는 --main-text-color가 이해하기 쉽다
페이지 전체에 걸쳐 해당 값을 바꿔야 할 경우 유용

단점

IE 미지원 No support IE Browser

Syntax

var( <custom-property-name> , <declaration-value>? )

.two {
  color: var(--my-var, red); /* --my-var가 정의되지 않았을 경우 red로 표시됨 */
}

custom-property-name

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

declaration-value

현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(), ], }) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있다.

example

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

/* Fallback */
/* In the component’s style: */
.component .header {
  color: var(
    --header-color,
    blue
  ); /* header-color isn’t set, and so remains blue, the fallback value */
}

.component .text {
  color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
  --text-color: #080;
}

javascript 에서 사용하기

getPropertyValue로 접근

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var")

// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var")

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4)

Reference

Blog Posts

DailyLog