Vue 변수 CSS에서 사용하기 🤩

프론트 작업을 하다보면 scipt 안에 있는 변수를 바로 css쪽에서 사용하고 싶을 때가 생긴다.
Vue에서 v-bind를 이용한 너무 쉬운 방법을 보고, 공유하고자 정리해본다.(다들 이미 쓰고 있을 지도...)

 

이번 포스트에서는 JS쪽 변수를 바로 CSS로 넘겨 배경색을 변경하는 간단한 예제를 만들어 볼 예정이다.

완성본은 아래와 같을 것이다. 물론 너무 간단하지만 아주 편하게 구현 할 수 있다는 것에 그 의의가 있다.

 

Vue Script 변수 CSS 파일에서 접근하기

우선 나는 Vue 3 + TS환경에서 진행 하였고, 아래처럼 ColorChange라는 컴포넌트를 간단하게 만들었다.

 

//ColorChange.vue
<template>
	<div class="color__changer">{{ color }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	props: {
		color: {
			type: String,
			require: true,
		},
	},
	setup() {
		return {};
	},
});
</script>

<style lang="scss" scoped>
.color__changer {
	color: white;
	width: 135px;
	background-color: v-bind('color');
}
</style>

 

너무 간단한 코드지만 짧게 설명하자면,

해당 컴포넌트는 버튼으로 클릭한 색상을 props으로 전달 받고, 해당 props를 바로 CSS에서 v-bind를 이용해 사용하고 있는 모습을 볼 수 있다.

 

만약에 props로 전달한 값이 복잡한 객체형태를 띄고 있다면, 리터럴형식으로 아래처럼 적용 할 수 도 있다.

background-color: v-bind('options.color');

 

다음 포스트에서는 위와 같은 방식을 이용하여 숫자가 올라가는 애니메이션 효과를 구현해 볼 것이다.

완성본은 아래와 같다. (관련 포스팅)