CSS变量适合运行时动态样式，Less变量适合构建期静态计算；前者支持JS操作和媒体查询响应，后者支持条件逻辑和单位运算，二者不可互通且作用域机制不同。
需要JS动态修改样式时必须用CSS变量
比如切换主题、响应系统暗色模式、根据滚动位置调整透明度——这些场景下，document.documentElement.style.setProperty('--color', '#fff') 能立刻触发重绘，而Less变量编译后就没了，JS根本读不到 @color 这个东西。
常见错误是试图在JS里操作 @primary，结果控制台报错 ReferenceError: primary is not defined；或者写了 var(--color) 却没在 :root 或父元素上声明 --color，导致回退值不生效，样式直接“消失”。
- 暗色模式适配必须用
matchMedia('(prefers-color-scheme: dark)')+setProperty，Less只能预编译两套CSS再手动切class，状态难同步 -
calc(var(--gap) * 2)是运行时实时计算，@gap * 2是构建期一次算死 - 组件级隔离靠层叠：
.card { --gap: 16px; }只影响后代，Less的@gap一旦在文件顶部定义，全局都受影响
需要复用逻辑或复杂计算时必须用Less变量
CSS变量不支持条件、循环、函数调用，lighten(var(--color), 10%) 直接语法错误；而Less可以写 .btn-variant(@color) when (lightness(@color) > 50%) { color: #000; } 做颜色明暗判断。
典型踩坑：把按钮变体生成逻辑从Less迁到CSS变量，发现 --btn-bg-primary、--btn-bg-secondary 得手写十几行，没法用 @each 自动产出；或者想让边框圆角随字号缩放：@radius: @font-size * 0.2; 在Less里合法，在CSS里只能硬编码或靠JS计算后注入。
立即学习“前端免费学习笔记（深入）”；
- Less变量支持单位运算：
@size: 1rem; width: @size * 2;→width: 2rem;；CSS变量做calc(var(--size) * 2)要求--size必须带单位，且不能是1rem和10px混用 - 嵌套作用域安全：Less中
.modal { @color: red; .header { color: @color; } }不会影响外部@color，而CSS变量一旦在.modal里设--color: red，所有子元素都继承，容易意外覆盖 - 构建期优化：Less变量参与tree-shaking，未使用的
@z-index-drawer不会进最终CSS；CSS变量只要声明了，哪怕没被var()引用，也占解析体积
混用时注意作用域和覆盖顺序
Less变量和CSS变量完全不互通，@color 不能传给 --color，反之亦然。强行桥接要用PostCSS插件（如 postcss-less-vars）在构建时把Less变量注入CSS变量声明，但会丢失运行时能力。
最容易被忽略的是命名冲突：--color 和 @color 看似对应，但Less编译后可能输出 color: #3498db;，而同名CSS变量若没设默认值，var(--color, #3498db) 的回退才真正起作用——很多人漏写回退，导致IE11或禁用JS时样式空白。
- Less变量大小写不敏感：
@Color和@color是同一个；CSS变量大小写敏感：--Color≠--color - Less导入顺序决定变量覆盖：
@import 'theme'; @import 'override';中后者优先；CSS变量靠层叠顺序，:root声明在前，.section声明在后，后者生效 - 调试时别只看Computed面板：CSS变量值要查“Styles”里的
element.style或:root，Less变量值只能去源码或编译后CSS里找
中小型项目优先Less，组件库/微前端必须CSS变量
Less学习成本低、编译快，npm install -g less 后改后缀就能跑，适合业务快速迭代；但如果你在写一个被多个团队引用的UI组件库，或者页面要接入外部JS SDK动态换肤，CSS变量是唯一选择——它不依赖构建流程，浏览器原生支持，JS可读可写可监听。
真实陷阱在于“半途而废”：比如只用CSS变量管颜色，其他仍用Less变量管间距和断点，结果媒体查询里写 width: calc(var(--spacing) * 2)，但 --spacing 在暗色模式下被JS重置了，布局却没跟着变——因为Less的 @breakpoint-sm 还是静态值，两者节奏脱钩。
真正难处理的是变量生命周期：Less变量活在构建那一刻，CSS变量活在整个页面生命周期。选错不是语法问题，是架构问题。
