css变量是低代码平台实现样式可配置、可切换、可继承的最小可行方案，需定义在:root或容器上，通过setproperty动态设置，回退值用于防错而非主题兜底，主题切换应基于[data-theme]分离变量而非类名覆盖。
CSS变量是低代码平台实现样式可配置、可切换、可继承的最小可行方案，不需要框架、不依赖构建工具、运行时零编译开销。
为什么不能直接在style属性里写var(--x)
HTML 的 style 属性只接受“计算后”的值，不支持 CSS 函数解析。你写 style="color: var(--text-color)" 是无效的，浏览器会直接忽略这一行。
- 正确做法：把变量定义在
:root或组件容器上，再让子元素用var()引用 - 如果想动态注入样式，必须用 JS 设置内联变量：
element.style.setProperty('--text-color', '#333') - 低代码编辑器里拖拽修改颜色时，背后就是调这个 API，不是拼字符串塞进
style
var(--size, 8px) 的回退值不是“兜底”，而是“保命机制”
当变量未定义或被覆盖为空值（比如 --size: ;）时，回退值才生效。它不是主题 fallback，而是防错层。
- 在低代码场景中，用户可能删掉某个主题变量，但组件仍要渲染——这时
var(--spacing-md, 0.5rem)能防止样式崩塌 - 回退值不参与计算：
calc(var(--size, 1rem) * 2)是合法的；但var(--size) * 2会直接失效 - 不要滥用回退值替代设计约束：比如
var(--color-primary, #007bff)看似安全，实则掩盖了 Token 缺失问题
主题切换必须靠 [data-theme] + :root 分离，不能只改类名
只给 加 class="dark" 然后写 .dark .btn { background: #333 }，就放弃了 CSS 变量的核心优势——级联与可组合性。
- 正确结构是：
:root { --color-bg: #fff; }+[data-theme="dark"] { --color-bg: #1a1a1a; } - 低代码后台导出主题包时，实际生成的就是一组
[data-theme="xxx"]块，而不是一堆 class 覆盖规则 - JS 切换主题只需一行：
document.documentElement.setAttribute('data-theme', 'blue')，无需操作 DOM 样式或重载 CSS - 注意：IE 不支持
[data-theme]选择器，如需兼容，得 fallback 到 class 切换 + 双份变量声明
真正难的不是写几个 -- 变量，而是让所有组件只读语义名（如 --color-surface-100），禁止出现 --button-primary-bg 这种绑定具体组件的命名——否则主题包一换，按钮就失联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
