vue中css变量的使用

1、在css中使用变量

(1)css中声明变量

--color：red

(2)使用变量

color:var(--color)   //color:red获取到全局声明变量值为red

2、使用vue中的变量

(1) 在html标签中

<span :style="{'--color':变量color}" ref='devcolor' />

data中声明变量color

data() {
  return {
    color: red,
  };
}

或者使用this.$refs.devcolor.style.setProperty('--color',this.color)

(2) css中使用color变量

color:var(--color)  //使用变量color：red

3、使用v-bing()

https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css

单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

这个语法同样也适用于 script-setup，且支持 JavaScript 表达式 (需要用引号包裹起来)：

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。