[css] variable 변수 총 정리

1. css 변수 선언

--color: rebeccapurple; /* 변수명: 값; */ 

--mint:;		/* X */
--mint: ;		/* O */
--mint != --MINT

변수 값에는 공백이라도 들어가야 변수가 선언되며, 대소문자를 구분한다. 그리고 변수값은 하위 요소에 상속된다.

2. css에서 변수 사용 방법

color: var(--color); /* 속성: var(--변수명); */

변수값이 지정되지 않았을 경우를 대비하여, 아래와 같이 default 값을 지정할 수 있다.

color: var(--color, yellow); /* 속성: var(--변수명, default 값); */

물론 default값도 변수로 삽입 가능하다.

color: var(--color1, var(--color2, var(--color3, yellow))); 

3. html에서 변수값 변경 방법

<div style="--color: blue">
   css Variable
</div>

---

CSS 변수 사용엔 디테일이 필요하다.

1. 변수값은 어떻게 적용이 될까?

.block {
   --p: 33;
   width: var(--p)vw;
   height: var(--p)vh;
}

숫자를 담은 변수를 단위화시키기 위해 위와 같이 코드를 작성했다. 너비: 33vw, 높이: 33vh으로 지정되었을까? 

.block {
   width: 33 vw;
   height: 33 vh;
}

실제 브라우저는 위와 같이, 숫자와 단위 사위의 무의미한 공백이 발생하면서 두개의 토큰으로 인식한다. 따라서 이 경우, calc()를 사용해야 원하는 값이 나온다.

.block {
   --p: 33;
   width: calc(var(--p) * 1vw);
   height: calc(var(--p) * 1vh);
}

그렇다면, 단위까지 담은 변수는 숫자화 할 수 있을까? calc(20 * 1vh / 1vh)의 값이 20이 아닌것 처럼, 그는 불가능하다. 따라서 변수에는 css 값이 아닌, 순수한 데이터 값을 넣어 사용하는 것을 추천한다.

2. background-image의 url을 변수화하면?

/* CSS LIMITATION */
--img: "sample.jpg";
background: url("img/" var(--img)); 

/* CSS BUG */
--img: "img/sample.jpg";
background: url(var(--img));

/* ★★★ GOOD ★★★ */
--img: url("img/sample.jpg");
background: var(--img); 

3. css 변수를 지원하지 않는 브라우저에서는?

background: red;
background: var(--accent-color, orange);

css 변수를 지원하지 않는 브라우저: red

--accent-color의 값이 지정되지 않은 경우: orange

--accent-color: yellowgreen으로 지정되어 있는 경우: yellowgreen

4. 만약 변수값이 속성 값에 올바르지 않다면?

:root { /* 어디서나 읽을 수 있도록 함 */ 
    --accent: 20px;
}
body {
    background: red;
}
h1 {
    background: blue;
    background: var(--accent, orange);
}

 

위의 css를 보면, h1 태그의 background-color에는 20px의 값이 들어오게 된다. 이는 background-color 속성에 대한 올바른 값이 아니다. 이러한 경우 브라우저는 어떻게 처리할까.

답은 초기화(initial) 이다. 값이 올바르지 않다고 판단될시 default 값으로 돌아간다. 위의 경우 background-color의 default값인 transparent가 된다.

 

1. Orange? orange는 변수값이 없을때, 대체용 값이다. 여기서도 악법도 법이라는 것인지, 잘못된 값을 대체하지 못한다.
2. Blue? 브라우저가 변수를 지원하는 경우, 위에서 선언된 동일 속성은 없는 속성 취급을 한다. 고로 blue가 선언되어있음을 전혀 인지하지 못한다.

5. 같은 타입 요소 중 일부만 변수값을 수정하고 싶다면?

<div>Mint Coding</div>
<div class="invert">Mint Coding</div>

<style>
  div {
    --size: 8em;
    height: var(--size);
  }
  .invert {
    --size: calc(var(--size) + 1em);
  }
</style>

.invert의 높이가 9em이 되었을까? 아니다. .invert에서 --size는 calc(var(--size) + 1em)으로 재정립되었다. var() 안의 --size가 정립되지 않았으므로, 이는 값이 지정되지 않는 변수값이 되어 버린다. height값을 1em만큼 늘리고 싶었던 것이라면, 아래와 같이 수정해야한다.

.invert {
  height: calc(var(--size) + 1em);
}

위의 background 케이스를 조금 변경해보자. 아래의 경우, h1의 배경색은 무엇이 될까?

:root { /* 어디서나 읽을 수 있도록 함 */ 
    --accent: green;
    --accent: var(--accent);
}
body {
    background: red;
}
h1 {
    background: blue;
    background: var(--accent, orange);
}

답은 orange 이다. :root 두 번째 줄에서 --accent는 재정립되었고, --accent의 대한 값이 없기 때문이다. 

6. 브라우저가 변수를 지원하는지 간단히 체크해 보고 싶다면?

body {
   background: red;
}
@supports (--css: varibales) {
   body {
      background: yellow;
   }
}

@supports는 어디까지나 간단한 체크용으로, 이 안의 실제 css를 삽입하는 것은 비추천하며, @supports가 지원 안되는 경우도 있으니, 실무시에는 크로스 브라우징 테스트 진행을 권고 드린다.

7. css변수는 javascript와 결합하여 사용 가능하다(+svg)

element.style.getPropertyValue("--color");
getComutedStyle(element).getPropertyValue("--color");

 

참고: youtu.be/UQRSaG1hQ20