内联style中不能声明CSS变量，只能引用；变量必须定义在CSS作用域（如:root或父元素style）中才能被var()安全使用；支持回退值，IE不支持，Safari 9.1+起支持；可通过JS动态修改实现批量更新，但无法响应:hover或@media逻辑。
内联style里不能声明CSS变量，只能引用
CSS变量（--my-var）在style属性中直接声明是无效的，比如<div style="--color: red; color: var(--color);">——浏览器会忽略--color: red这一段，var(--color)查不到值，最终color回退为初始值（通常是黑色）。原因在于：内联style只接受“已计算”的最终值，不解析自定义属性声明。
必须把变量定义在CSS作用域里，比如:root、某个父元素的<style>块，或外部CSS文件中。之后才能在任意元素的style属性里用var(--color)安全引用。
-
:root是最常用位置，全局可访问：:root { --primary: #007bff; } - 变量支持回退值：
color: var(--primary, #333);，当--primary未定义时生效 - IE完全不支持；Safari 9.1+ 才开始支持
var()，旧版需谨慎
用父容器的style提供变量作用域，避免重复写值
想让一组卡片共享配色但又不想每个都写相同颜色值？可以把变量“挂”在父容器的style上，子元素通过var()向上查找继承。父容器的style本身不参与渲染，只作变量注入点，轻量且语义清晰。
例如：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<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>
- 父
<div>的style不产生视觉效果，仅提供变量上下文 - 子元素
var(--bg)沿DOM向上找到最近定义，无需额外class或JS - 比在每个子元素重复写
style="background-color:#e3f2fd"更易维护、HTML体积更小
JavaScript动态改CSS变量实现批量样式更新
要切换主题或响应用户操作，直接改:root里的变量值，所有引用它的元素样式会自动重算——这是CSS变量最实用的价值点。
操作方式很简单：
document.documentElement.style.setProperty('--primary', '#ff6b35');
- 改的是
:root，所以影响全局；若只想局部生效，可对特定父元素调用element.style.setProperty - 注意：不要用
setAttribute('style', ...)覆盖整个style字符串，会清掉原有内联样式 - 配合
transition可实现平滑渐变，比如background-color: var(--bg); transition: background-color 0.3s;
别指望CSS变量响应:hover或@media逻辑
CSS变量本身是静态值，无法像Sass变量那样编译时条件分支，也不能在:hover伪类或@media查询里“重新声明”来触发响应式变化。
常见误区：
- 写
<div style="--size: 16px;"><span style="font-size: var(--size);">Text</span></div>，再期望div:hover { --size: 20px; }生效——不行，style属性里的变量不可被CSS规则动态覆盖 - 真正可行的是：把变量定义在CSS规则里，比如
div { --size: 16px; } div:hover { --size: 20px; }，再让子元素引用它 - 如果必须靠
style属性驱动响应式，得用JS监听事件后手动setProperty
变量不是万能胶，它简化的是“值复用”和“运行时批量更新”，而不是替代选择器逻辑或媒体查询能力。该手动写@media的地方，还是得写。
