less变量不能在运行时动态修改，因其在构建阶段已被编译为固定值；需用@primary-color: var(--primary-color, #007bff)桥接css变量，并通过document.documentelement.style.setproperty()动态更新。
Less变量不能直接用于属性名或选择器
Less变量只支持替换值，不支持动态生成CSS语法结构。比如你写 @width: 200px，只能用在 width: @width 这种属性值位置，不能写成 @{width}: 100px（这会报错），也不能用在选择器里如 .@{name}（除非用插值 .@{name} { ... }，但那是另一回事）。
常见错误是试图让两个属性“联动”，比如希望 margin 自动等于 padding 的两倍——这必须靠手动赋值或函数计算，不能靠变量自动响应。
-
@padding: 12px是合法的；@margin: @padding * 2也是合法的（Less 支持基础运算） - 但如果你改了
@padding，@margin不会自动重算——它只是编译时的一次性求值 - 想实现“一处改、多处联动”，必须把关联逻辑显式写进变量定义里，比如
@margin: @padding * 2
用函数封装可复用的值关系
当多个属性依赖同一逻辑（比如字号缩放、间距比例），硬编码容易出错。Less 提供 unit()、percentage()、round() 等内置函数，配合变量能提升一致性。
例如按钮内边距和圆角常按字号比例设定：
@font-size-base: 14px; @padding-y: unit(@font-size-base * 0.75, px); @padding-x: unit(@font-size-base * 1.5, px); @border-radius: unit(@font-size-base * 0.25, px);
这样改 @font-size-base 就能批量调整，但要注意：
- 所有参与运算的值单位需兼容（
14px * 0.75可行，14px + 2em会报错） -
unit()是必需的——否则@font-size-base * 0.75编译后可能带单位混乱（如10.5pxpx） - 避免嵌套过深的变量引用，比如
@a: @b; @b: @c; @c: 10px，可读性差且调试困难
慎用 !important 与变量混合
Less 不允许在变量值中直接拼接 !important，像 @color: red !important 是语法错误。常见误写是：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@text-color: #333 !important; // ❌ 报错
正确做法是把 !important 留在声明处：
@text-color: #333;
p { color: @text-color !important; }
否则你会遇到编译失败，或者更隐蔽的问题：某些构建工具（如 webpack + less-loader）可能静默忽略错误，导致样式不生效却无提示。
- 变量本质是字符串替换，
!important属于 CSS 声明修饰符，不在变量作用域内 - 如果项目强制要求大量
!important，说明 CSS 优先级设计可能已失控，该重构而非靠变量补救
导出变量到 JavaScript 需额外工具链
Less 编译后变量就消失了，浏览器里查不到 @spacing-xs。想在 JS 中读取这些值，不能靠 getComputedStyle，必须借助构建时导出（如 less-vars-to-js 插件）或约定 CSS 自定义属性桥接。
推荐方式是双写一份 CSS 变量：
@spacing-xs: 4px;
:root {
--spacing-xs: @spacing-xs;
}
然后 JS 用 getComputedStyle(document.documentElement).getPropertyValue('--spacing-xs') 读取。注意：
- Less 变量和 CSS 自定义属性是两套系统，修改前者不会自动同步后者
- 如果 Less 变量含运算（如
@spacing-md: @spacing-xs * 3），CSS 变量无法复现该逻辑，得手动同步 - 某些旧版 IE 不支持 CSS 变量，若需兼容，JS 侧需 fallback 到硬编码值
Less 的变量关联本质是编译期静态替换，不是运行时响应式绑定。真正容易被忽略的是：你以为改了一个变量就能全局联动，其实只是重新编译了一次——上线后用户看到的永远是固定值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
