[css] 변수사용하기 (var)

--myval-color: red;

color: var(--myval-color);

var(--name, value);

※ 선언이 안되어 있을경우, 대체값을 설정
color: var(--myval-color,  yellow);

※ 여러 대체값을 설정가능하다 
color: var(--myval-background,  var(--myval-border-color, cyan));

:root { --blue: #0000FF; }

.div1 {
    --blue: #1111FF;   // 설정 또는 재정의된다.
    background: var(--blue); 
}

var r = document.querySelector(":root"); // 전역
    
var rs = getComputedStyle(r);
var color = rs.getPropertyValue("--blue");    // 값취득
r.style.setProperty("--blue","red");    // 전역값변경

    Media Queries (미디어마다 해당 셀렉터내 변수를 재정의한다.)
    .container{ --fontSize: 25px; }
    
    .container { font-size: var(--fontSize); }
    
    @media screen and (min-width: 450px) {
      .container {
        --fontsize: 50px;
      }
    }