vue3 dynamic css variable(vue 3.2 add)

오랜만에 벨로그에 글을 끄적인다.
vue 3.2 에 추가된 기능인데, v-bind 를 사용하여 CSS 에 속성을 상태로 관리가 가능해졌다.

한번 새로운 기능을 맛을보기 위해 프로젝트를 생성해보자. @vue/cli 모듈을 활용하여 프로젝트를 구성해보도록 하겠다.

npm i -g @vue/cli

설치가 완료되었으면 확인을 해보자.

vue --version

버전이 잘 출력되는거 보니 설치가 정상적으로 되었다. 이제는 프로젝트를 생성하자

vue create hello-vue3

Default (Vue3) 를 선택해준다.

1~3분 정도 기다리면, 설치가 완료된다. 해당 디렉토리로 이동 후, npm run serve 로 실행을 해보자.

정상적으로 실행이 되는게 확인이 가능하다. 우리는 3.2 버전에 추가된 기능을 실습해야하기에 package.json 에서 vue 모듈 버전을 확인해보자.

"vue": "^3.0.0"
^(캐럿)으로 설치가 되었기때문에 3.0.0 >= 3.0.0 < 4.0.0

VSCode 에서 위처럼 확인이 되는지는 모르겠지만, webStorm 에서는 확인이 가능하다.(3.2.20 이 설치가 되었다는걸 확인이 가능)

// HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{ colorState }}</div>
    <button type="button" @click="toggleColor">toggleColor</button>
  </div>
</template>

<script setup>
import {ref, defineProps} from 'vue';

const props = defineProps({
  msg: String
});

console.log(props);

const colorState = ref('red');

const toggleColor = () => {
  if (colorState.value === 'red') {
    colorState.value = 'blue';
  } else {
    colorState.value = 'red';
  }
};

</script>

<style scoped>
.hello h1 {
  text-align: center;
  color: v-bind(colorState);
}
</style>

color: v-bind(colorState); 가 보이는가?

우리는 이제 저것을 통해 스타일 내부에 상태를 두어서 쉽게 핸들링이 가능하다.
State-Driven CSS Variables 상태기반 CSS 변수라고 불리운다.

이게 SCSS 에서도 그대로 사용이 가능한지는 테스트를 해보지는 않아서 모르겠다.