CSS 변수 시작하기

:root {
    --primary-color: #eaefed;
    --text-color: #001100;
}

.link {
    border: 1px solid var(--primary-color);
    color: var(--text-color, #111000); 
    /* if --text-color is invalid,fallback value #111000 is used */
}

변수의 범위

.btn {
    --btn-danger-color: #FF4136;
    background-color: var(--btn-danger-color);
}
.link {
    background-color: var(--btn-danger-color, green); 
    /* Background color is green because --btn-danger is invalid */
}

JavaScript로 CSS 변수 액세스 및 수정

CSS 변수 값 얻기

const btn = document.querySelector('.btn');

let btnDangerBg = getComputedStyle(element).getPropertyValue("--btn-danger-color"); 

console.log(btnDangerBg); // #FF4136 - value of the css variable defined in .btn class in CSS

CSS 변수 값 변경

  element.style.setProperty("--variable-name", value)

function changeColorToPurple(){
   //Set the CSS variable value
  btn.style.setProperty("--btn-danger-color", "purple")
}

<button class="btn" onclick="changeColorToPurple()">Change Color</button>

데모

감사합니다.

참조

CSS custom properties - MDN

    [Every thing you need to know about CSS variables](https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/)