CSS变量是运行时生效的自定义属性，可被JavaScript读写、响应系统偏好，支持动态主题切换和calc()实时计算，遵循CSS层叠规则且有作用域，而预处理器变量仅编译期存在。
因为 CSS 变量是运行时生效的，能被 JavaScript 直接读写、响应用户操作或系统偏好（比如 prefers-color-scheme），而预处理器变量在编译后就消失了，只剩硬编码值。
var() 能在运行时被 JavaScript 修改，--prefix 变量名可动态赋值
CSS 变量本质是“自定义属性”，浏览器原生支持其读写。这意味着你不需要重新加载样式表，就能切换主题、适配暗色模式、甚至做动画过渡。
-
document.documentElement.style.setProperty('--primary-color', '#ff6b35')立即生效，所有var(--primary-color)引用同步更新 - 配合
matchMedia('(prefers-color-scheme: dark)')，可监听系统主题并自动切换变量值 - 不能对预处理器变量做类似操作——Sass/LESS 变量在构建阶段就被替换成具体值，运行时无迹可寻
:root 和局部选择器共同构成真实级联作用域
CSS 变量遵循 CSS 的层叠规则，不是简单的“全局命名空间”。同一个变量名，在不同上下文可以有不同值，且子元素自动继承、可覆盖。
-
:root { --gap: 12px; }定义默认间距，但.card { --gap: 16px; }会覆盖它，仅影响该卡片及其后代 - 这种“就近原则”让组件样式隔离更自然，不像预处理器变量需靠文件路径或命名约定模拟作用域
- 注意：变量名大小写敏感，
--Gap和--gap是两个不同变量；而预处理器通常不区分（如 Sass）
calc() + var() 支持运行时计算，预处理器只能编译期计算
你可以在 calc() 中直接嵌套 var()，浏览器每次重排都会重新计算结果。这对响应式布局、动态缩放特别有用。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
-
width: calc(var(--base-width, 100%) / var(--column-count, 3));——列数变化时宽度自动重算 - 预处理器也能做类似计算，但结果是静态的：
$width: $base-width / $column-count;编译后就是固定像素值 - 注意：
calc()内部不能混用单位类型，var(--px-value) + var(--em-value)会失效，必须统一单位
浏览器原生支持带来零编译开销，但兼容性需兜底
CSS 变量无需构建工具介入，开发时改完保存即见效果；上线后也省去预处理步骤，首屏渲染更快。
- 现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）全部支持，IE 完全不支持
- 用
@supports (color: var(--t))包裹依赖变量的样式块，给旧浏览器提供回退方案 - 别把变量当“魔法开关”滥用：过度嵌套
var()+calc()可能拖慢重排性能，尤其在频繁触发的滚动或动画中
真正难的不是设几个 var()，而是把组件内所有可变色区域（包括 SVG fill、box-shadow、渐变 stop color）都收敛到同一套变量体系，并建立设计系统级的语义映射——这点多数团队只做了 70%，剩下 30% 在深色模式边缘 case 里突然崩掉。
