Vue 3中动态绑定CSS变量有两条路径：一是用:style绑定内联--xxx变量，兼容所有Vue 3.x版本，最稳定；二是用<style>中的v-bind()直接引用响应式变量，需Vue≥3.4、Vite≥4.3等硬性条件。
:style 绑定 --xxx 变量（最稳，兼容所有 Vue 3.x）
这是当前最可靠、零配置的方案，适用于 Vue 3.0 到最新版，不依赖构建工具或编译器支持。
-
--前缀不能省：键名必须是字符串形式，如'--text-color'；写成textColor或color都无效 - 值会自动转字符串，但数值类建议手动加单位：比如
gap + 'rem'，否则0可能变成空字符串导致样式失效 - 变量只是“挂”在元素上，CSS 中必须显式用
var(--text-color)才能读取，否则不会生效 - 作用域默认继承：父元素设了
--bg，子元素样式里写background: var(--bg)就能读到，除非被all: initial或 shadow DOM 截断
示例：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
<template>
<div :style="{ '--text-color': textColor, '--gap': gap + 'rem' }">
<slot />
</div>
</template>
<p><script setup>
import { ref } from 'vue'
const textColor = ref('#222')
const gap = ref(1.5)
</script>v-bind() 在 <style> 中直接引用（需满足硬性条件）
写法干净，但不是运行时求值，而是编译时注入 CSS 变量，对环境有强依赖。
- 必须用
<script setup>，且变量要是ref或computed，普通let不行 - Vue 版本 ≥ 3.4，Vite ≥ 4.3（低于此版本可能静默失效，控制台无报错但变量为空）
-
<style scoped>下可用，变量会被哈希后缀化（如--color-f3f2eb18），不影响使用 - 有单位的值要配合
calc()：比如transform: rotate(calc(v-bind(rotate) * 1deg))
示例：
立即学习“前端免费学习笔记（深入）”；
<script setup>
import { ref } from 'vue'
const color = ref('red')
const rotate = ref(-90)
</script>
<p><style scoped>
.box {
color: v-bind(color);
transform: rotate(calc(v-bind(rotate) * 1deg));
}
</style>为什么变量设了却没生效？按链路顺序排查
不是代码写错，而是某个环节断开了。打开浏览器 Elements 面板，逐层确认：
- 目标元素的
style属性里有没有出现--xxx: value？没有 →:style绑定失败，或变量非响应式（比如没用ref） - Computed 面板里搜
--xxx，显示为initial或空 → CSS 里漏了var(--xxx)，或作用域被重置（比如父级用了all: initial） - 子组件里
var(--xxx)不生效 → 先检查子组件根元素是否加了all: initial，再确认父组件是否把变量设在可继承的节点上
动态 CSS 变量 vs :class，选哪个？
取决于变更粒度和维护方式：
- CSS 变量适合数值型微调：颜色、透明度、间距、圆角、阴影偏移等，尤其是需要插值动画或 runtime 计算的场景
-
:class更适合整套主题切换（theme-dark/theme-light）、状态组合（is-active is-disabled）这类离散分类 - 混合用也常见：用
:class切主题类名，再用:style绑定该主题下的具体数值变量
复杂点在于作用域继承和构建链路耦合——v-bind() 看似简洁，但一旦环境不达标，它就彻底不工作，连 fallback 都难加；而 :style 绑定虽然多写几个字符，但每一步都可控、可 debug、可降级。
