CSS自定义属性更适合动态渲染，因运行时可被JS读写并自动重绘；LESS变量仅存于编译期，无法运行时修改。
CSS3自定义属性更适合动态渲染需求，LESS变量在编译期就消失了，根本无法运行时修改。
var(--x) 能被 JavaScript 实时读写，@x 不能
CSS 自定义属性本质是级联的、可继承的、运行时存在的 CSS 属性，getComputedStyle 和 style.setProperty 都能直接操作它；而 LESS 变量只存在于编译前，编译后完全不留下痕迹，JS 拿不到、改不了。
- ✅ 正确做法：用
:root { --theme-color: #3498db; }，再用document.documentElement.style.setProperty('--theme-color', '#e74c3c') - ❌ 常见误解：以为
@theme-color编译后还能被 JS 修改——它早被替换成固定值了，比如color: #3498db; - ⚠️ 注意：修改
--x后，依赖它的var(--x)会自动重绘，无需手动触发样式更新
作用域和响应式切换场景下，--x 更灵活
LESS 变量的作用域是静态的（基于嵌套层级或文件导入顺序），而 CSS 自定义属性遵循标准级联规则，天然支持按组件、主题、媒体查询动态覆盖。
- 例如 dark mode 切换：
@media (prefers-color-scheme: dark) { :root { --bg: #121212; } }，浏览器自动生效 - 组件级隔离：
.card { --shadow-size: 4px; box-shadow: 0 0 var(--shadow-size) rgba(0,0,0,0.1); }，不影响外部 - LESS 里做不到这种“运行时分支”——所有
@shadow-size在编译时就被算死了，没法根据用户偏好或状态变化重新求值
性能与兼容性取舍点
现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）对自定义属性支持已非常稳定；LESS 变量无运行时开销但丧失动态能力。
- ✅ 如果项目需支持 IE11，必须用 LESS（或 PostCSS 插件降级），但要注意：IE 不支持
var()，也无法用 JS 控制主题色 - ✅ 如果用 Vue/React 做主题切换，
style.setProperty+var(--x)是最小侵入方案；LESS 方案得靠 class 切换 + 大量预设 CSS 块，体积和维护成本更高 - ⚠️ 小心滥用：大量嵌套
var(--a, var(--b, var(--c)))可能轻微拖慢样式计算，但远不如 JS 批量操作 DOM 的开销大
真正容易被忽略的是：很多人把 var(--x) 当作“CSS 里的 let”，却忘了它本质是**级联属性**——父元素设 --x，子元素没显式覆盖，就会继承并参与计算。这个行为不像编程变量，更像 CSS 的 color 或 font-size，得按层叠逻辑去调试，而不是查作用域链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
