CSS變量是指在CSS中定義的一種特殊的變量，它可以直接在CSS樣式中進行引用，并且可以在編寫樣式時動態的修改。

Vue是一種流行的JavaScript框架，被廣泛應用于Web開發中。Vue對CSS變量的支持非常好，在Vue組件中可以輕松地使用CSS變量定義和修改組件樣式。

// 定義CSS變量
:root {
--primary-color: #2196F3;
}
// 在樣式中使用CSS變量
.btn {
color: var(--primary-color);
}
// 修改CSS變量
:root {
--primary-color: #f44336;
}

在Vue中，可以使用v-bind指令來動態修改CSS變量：

// 在Vue組件中定義CSS變量
<style>
:root {
--primary-color: {{ primaryColor }};
}
</style>
// 在Vue組件模板中使用CSS變量
<template>
<button v-bind:style="{ color: `var(--primary-color)` }">提交</button>
</template>
// 在Vue實例中修改CSS變量
<script>
export default {
data() {
return {
primaryColor: '#2196F3'
};
},
methods: {
changeColor() {
this.primaryColor = '#f44336';
}
}
};
</script>

通過v-bind和CSS變量，Vue可以實現動態的樣式修改，為Web開發帶來更大的靈活性。