css变量是运行时可变、可继承、js可操作的原生机制，解决主题切换与动态响应痛点；预处理器变量仅编译时静态替换，无法实现暗色模式切换、媒体查询覆盖或内联局部控制。
CSS 变量（即自定义属性）不是“锦上添花”的语法糖，而是解决样式复用、主题切换和动态响应真实痛点的原生机制。它在现代项目中已成标配，不掌握等于主动放弃维护效率和交互灵活性。
为什么不能只用预处理器变量（如 Sass $color）？
预处理器变量在编译时就被替换成具体值，运行时不可变；而 CSS 变量是浏览器运行时解析的，可被 JavaScript 读写、可继承、可被媒体查询重定义。
-
getComputedStyle(el).getPropertyValue('--primary-color')能实时取值，Sass 变量完全无法做到 - 暗色模式只需切换
document.documentElement.style.setProperty('--bg', '#121212')，无需重载 CSS 文件 - 媒体查询中可直接覆盖变量：
@media (max-width: 768px) { :root { --columns: 1fr; } } - 内联样式中声明变量（
<div style="--gap: 12px">）能精准控制局部组件，Sass 无此能力 <h3> <code>var(--x, fallback)的 fallback 不是万能兜底回退值只在变量**未定义**或**值为 invalid（如
--size: 20px 30px这种非法语法）**时生效，不会在作用域外“自动降级”。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 如果父元素没定义
--theme，子元素写color: var(--theme, blue)，会用blue - 但如果父元素定义了
--theme: initial或--theme: unset，回退值**不会触发**——此时变量值是合法的（只是语义为重置），var()就照常计算 - 嵌套
var()不支持：写var(--color, var(--fallback))是无效语法，浏览器报错
内联 CSS 变量 +
var()是最灵活的布局控制方式把网格列数、间距、断点阈值等抽成内联变量，HTML 结构即配置，无需改 CSS 文件就能调整布局。
<div class="grid" style="--columns: 240px 1fr; --gap: 16px"> 配合 <code>.grid { display: grid; grid-template-columns: var(--columns); gap: var(--gap); }- 组件库中用
style="--item-height: 48px"控制列表项高度，比写一堆.list--small.list--large类更干净 - 注意：内联变量优先级高于
:root中同名变量，但低于!important声明的普通属性（变量本身不支持!important）
真正难的不是学会写
--color和var()，而是在复杂组件中判断变量该挂在哪一层作用域、何时该用内联、何时该用 JS 动态注入——这些决策直接影响样式的可预测性和调试成本。 - 如果父元素没定义
