CSS变量更适合动态渲染，因运行时可被JS读写并自动重绘；Less变量仅存于编译期，编译后消失，无法运行时修改。
因为 CSS 变量是运行时存在的 DOM 属性，能被 JavaScript 直接读写、响应系统偏好、参与 calc() 实时计算；Less 变量在编译后就彻底消失，只剩硬编码值，无法动态干预。
var(--x) 能被 JS 实时修改，@x 根本不存在于运行时
浏览器里根本找不到 @x 这种东西——它早在构建阶段就被替换成具体值（比如 color: #3498db），JS 拿不到、改不了、也监听不到变化。
-
document.documentElement.style.setProperty('--primary-color', '#e74c3c')执行后，所有var(--primary-color)立刻重绘，无需刷新或切换 class - 配合
matchMedia('(prefers-color-scheme: dark)')，可自动响应系统暗色模式切换 - Less 方案只能靠预设多套 CSS + 切换
<link>或 class，体积大、延迟高、状态难同步
:root 和 .card { --gap: 16px } 共同构成真实级联作用域
CSS 变量不是“全局命名空间”，而是遵循标准层叠规则的自定义属性，天然支持组件级隔离和就近覆盖。
-
:root { --gap: 12px; }定义默认值，.card { --gap: 16px; }仅影响该卡片及其后代，子元素自动继承 - Less 的
@gap作用域靠文件导入顺序或嵌套模拟，实际编译后全是扁平 CSS，无继承、无覆盖逻辑 - 变量名大小写敏感：
--Gap和--gap是两个变量；Less 中@gap和@Gap通常等价，容易引发隐性冲突
calc(var(--a) + var(--b)) 在布局中实时重算，$a + $b 编译后就是死值
calc() 内部嵌套 var() 是运行时表达式，每次 layout 触发都会重新求值；而 Less 的算术运算发生在构建期，输出固定数字。
立即学习“前端免费学习笔记（深入）”；
- 响应式列宽：
width: calc(var(--base-width, 100%) / var(--column-count, 3));—— 列数变，宽度自动重分 - Less 写法：
$width: $base-width / $column-count;→ 编译成width: 33.333333%;，再改列数就得重新构建 - 注意：
var(--px-value) + var(--em-value)会失效，calc() 要求单位统一，这不是 CSS 变量的问题，而是 calc 本身限制
IE 不支持 --x，但降级方案比 less.js 浏览器编译更可控
CSS 变量不兼容 IE11 是事实，但生产环境兜底方式比在浏览器里跑 less.js 更轻量、更安全。
- PostCSS 插件（如
postcss-custom-properties）可在构建时将var(--x)替换为回退值，保留原始语义 - less.js 浏览器端编译：性能差、CSP 不友好、错误难调试、无法 tree-shake，生产环境应禁用
- 真正容易被忽略的是作用域泄漏：
:root声明的变量全局可见，多个组件若都用--theme-color，可能相互覆盖，需靠命名前缀或局部选择器约束
