CSS变量不能在内联style中声明，只能用var()引用；须先在:root或父元素等CSS作用域中定义，如<div style="--bg:#e3f2fd">子元素通过var(--bg)继承；不支持IE，Safari旧版有兼容问题；无法响应@media、:hover等动态逻辑。
内联样式里怎么用CSS变量
直接在 style 属性里写 --color-primary: #007bff 是无效的——浏览器只认 style 里的“最终计算值”，不解析自定义属性。必须先在某个 CSS 作用域（比如 :root 或父元素）中声明变量，再在 style 里用 var(--color-primary) 引用。
常见错误是以为这样能行：<div style="--c:#f00; color: var(--c);"> —— 实际上，style 属性中的自定义属性声明会被忽略，var() 查不到值，最终 color 退为初始值（通常是黑色）。
- 变量必须在样式表或
<style>块中定义，例如：:root { --text-size: 16px; } - 内联样式只能使用
var()，不能声明变量 - 支持回退值：
color: var(--text-color, #333)，当变量未定义时生效
如何让多个内联样式复用同一组变量值
典型场景：一组卡片需动态配色，但又不想为每个卡片写独立 class。这时可把变量“注入”到容器上，子元素用内联样式继承并引用。
例如：
<div style="--bg:#e3f2fd; --border:#bbdefb;"> <div style="background-color: var(--bg); border: 1px solid var(--border);">Card 1</div> <div style="background-color: var(--bg); border: 1px solid var(--border);">Card 2</div> </div>
- 父容器的
style不影响渲染，只提供变量作用域 - 子元素的
var()会沿 DOM 向上查找最近的定义，所以父级设变量最轻量 - 避免在每个子元素重复写相同变量值，减少 HTML 体积和维护成本
内联样式 + CSS变量的兼容性与性能注意点
IE 完全不支持 var()，所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）都支持，但 Safari 9.1–13.1 对内联样式中 var() 的解析有细微 bug：若变量值含单位（如 --size: 1.2em），某些旧版 Safari 可能无法正确继承。
立即学习“前端免费学习笔记（深入）”；
- 生产环境若需兼容 IE，必须降级方案（如 JS 注入 style 或服务端渲染静态值）
- 变量名大小写敏感：
--Color和--color是两个变量 - 大量使用
var()不影响渲染性能，但过度嵌套（如var(--a, var(--b))）可能增加解析开销，一般场景无需担心
什么时候不该用内联样式 + CSS变量
当需要响应式变化（比如根据 @media 切换变量值）、伪类状态（:hover、:focus）、或动画关键帧时，内联样式基本失效——因为无法在 HTML 中表达条件逻辑。
-
style属性无法响应hover，所以<button style="color: var(--primary); --primary: blue;">无法实现悬停变色 - 媒体查询必须写在
<style>或外链 CSS 中，内联样式不支持@media - 如果变量值来自用户输入或 API，且需频繁更新，建议用 JS 操作
element.style.setProperty('--var', value)，比反复重写整个style字符串更安全
变量不是万能胶水，它简化的是“值传递”，不是“逻辑控制”。真要动态主题或状态驱动样式，还是得靠 class 切换或 CSS-in-JS 方案。
