var(--clr) 전역사용, 개별사용

전역사용

아래의 경우는 모든 요소에서 활용는 되는 경우입니다.

:root {
    --clr: #ff2972; /* 모든 요소에 적용할 색상 */
}

#clock div {
    color: var(--clr);
}

 

개별사용

 <div id="clock">
        <div id="hr" style="--clr:#ff2972;"></div>
        <div id="min" style="--clr:#fee800;"></div>
        <div id="sec" style="--clr:#04fc43;"></div> 
 </div>
 
 ** css **
#sec,
#min,
#hr { 
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    inset: 0;
    text-align: center;

    color: var(--clr);
}
// 이 경우는 --clr은 개별 3가지 객상으로 분리되어 사용이 됩니다.