Vue css variables (style 영역에서 동적인 값 쓰고싶을 때)

프로젝트 진행 중에 단순 마크업 작업으로 해결할 수 없는 디자인 이슈가 생겼다.
API로 부터 받은 데이터를 기반으로 컴포넌트별로 동적으로 다른 css를 적용해야 했다.

물론 template 내에서 inline style 을 적용할 수도 있었지만
<style> 영역에서 동적인 값을 사용하는 법을 알아보게 되었다.

그러다가 알게 된 css variables 이라는 놈... 역시 근본이 없어서 이런거 하나 몰랐다
기존에는 SASS 및 LESS 등을 사용하면서 css 변수를 사용해왔는데,
순수 css 에서도 css variable 이라는 기술을 통해 재활용 가능한 변수를 사용할 수 있었다. (물론 IE는 안됨ㅋ)

CSS Variables

이녀석에 대한 정보라면 사실 CSS Variables 라고 검색하면
공식문서부터 별의별 블로그 결과가 나올테니 자세한 설명은 생략하겠다.

간단하게 설명하자면, --변수명: 값; 의 포맷으로 변수를 선언하고,
속성: var(--변수명) 과 같은 방법으로 변수를 사용할 수 있다.

div {
    --test-color: #000000;
    color: var(--test-color);
}

추가적으로 해당 css variable 이 상위 element 에서 선언되었다면, 하위 element 에서도 접근하여 사용이 가능하다.

Use CSS Variables in Vue

이제 본론으로 돌아와서 CSS Variables를 Vue 에서 적용해보자.
최종적으로 원하는것은 --변수명 의 값을 script 단에서 동적으로 정하고 싶은 것이다!

먼저 computed에 아래 예시처럼 변수화를 원하는 스타일 정보를 입력한다.

computed: {
  customStyle () {
    return {
      '--test-color': this.testColor // testColor 는 예시 변수명
    }
  }
}

그 다음 template 내에서 해당 스타일 정보가 필요한 element에 style 속성을 바인딩 해준다.

<div :style="customStyle" style></div>

이게 끝이다. 이제 대망의 <style> 내에서 변수를 사용해보자!

div {
  color: var(--test-color);
  height: calc(var(--test-height) * 10); /* calc를 이용하여 값을 계산할 수도 있다 */
  background: var(--test-color, blue); /* css variables 를 지원하지 않는 브라우저에는 두번째 값이 적용된다. */
}

아마 잘 될것이다..!! (IDE 혹은 에디터상에서 해당 변수 정보를 알 수 없다고 경고가 나올 순 있다..)