css custom properties

설명

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (–main-color: black;) var() 함수를 사용해 접근할 수 있습니다. (color: var(–main-color);)

사용법

element {
    --main-bg-color: brown;
}

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

javascript 에서 사용 참고

var styles = getComputedStyle(document.documentElement)
var mainBgcolorValue = styles.getPropertyValue('-main-bg-color:')

:root

CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 <html> 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같습니다. 참고

유효하지 않은 변수 처리

.gray {
    color: var(--gray, #dcdcdc);
}

알게 된 점

property 가 두번 선언되는 이유 방어 코드

.gray {
    color: #dcdcdc;
    color: var(--gray);
}

test

다음을 참고

Lee Junghan