JS, CSS - CSS 변수 사용

CSS 에서도 변수를 사용 할 때가 많이 있다. 일괄적으로 변경되거나 하면 일일이 다 바꿀 필요를 덜어주고 하는 등의 이점이 있기 때문이다.
그리고 JS 에서도 특정 상황에 이 값을 변동하고 싶을 수 있다. 그럴 때 접근하는 방법이다.

CSS 변수 사용법

CSS 변수 사용은 크게 어렵지 않다. --variable-name 이런 식으로 작성이 가능하고, var(--variable-name) 이런 식으로 쓸 수 있다.

:root{
  --primary-color: #333;
  --secondary-color: #e2e2e2;
}
.test__inner: {
  --test-color
  background-color: var(--primary-color, --test-color, #fff);
}

변수명에 대소문자 구별함

:root 가상클래스는 문서 트리의 루트를 선택하며, html 선택자와 같지만 명시도는 더 낮다.

JS에서 사용법

element 에 접근하여 가져올 수 있고 root 를 바로 가져올 수도 있다.

const rootStyle = document.documentElement.style; // root
style.setProperty("--primary-color", "#5e5e5e");
style.setProperty("--secondary-color", "#333");

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

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

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

참조 문서

MDN - 사용자 지정 CSS 속성 사용하기