less变量能集中控制样式、避免硬编码错漏，支持编译期替换与简单运算，但需语义化命名、统一css变量桥接运行时换肤，且跨文件引用时须严格管控作用域与命名一致性。
因为硬编码数值会让样式失去可维护性，而变量能集中控制、全局联动、避免错漏。
硬编码数值在响应式断点中会引发连锁错位
比如在多个 @media 规则里直接写 768px、992px，一旦设计规范调整（如把「中屏」从 768px 改为 750px），你得手动搜索替换所有散落位置——漏改一处，@media (min-width: 768px) 就和布局系统脱节，导致平板横屏样式不生效或错乱。
- Less 变量是编译期文本替换，
@breakpoint-md: 768px;定义后，所有@media (min-width: @breakpoint-md)都同步更新 - 别用字符串形式赋值，如
@breakpoint-md: "768px";——这会让@media编译失败，Less 要求数值类型带单位，不能是字符串 - 避免冗余命名，如
@screen-md-min；Less 不支持变量名插值，@{md}-min会报错
主题色/间距/字体等基础值必须靠变量统一收敛
一个项目里 color: #1890ff; 出现 37 次，改主色就得逐个找、逐个换；而定义 @primary-color: #1890ff; 后，所有 color: @primary-color; 自动响应变更，连伪类、hover、disabled 状态都一并覆盖。
- 变量支持简单运算：
@spacing-lg: @spacing * 2;，改基础间距@spacing，整个系统自动缩放 - 嵌套作用域内可覆盖变量，但需谨慎：局部变量优先于全局，容易误覆盖导致意外交互
- 变量名必须语义化且稳定，比如
@font-size-base比@fs14更利于协作与长期维护
变量无法被 JavaScript 运行时修改，这点常被误判
有人以为改了 @primary-color 就能在 JS 里调用 document.documentElement.style.setProperty('--primary-color', 'red') 生效——其实不行。Less 变量在编译阶段就被替换成固定值，最终 CSS 文件里根本不存在 @primary-color 这个符号。
- 想实现运行时换肤，必须桥接 CSS 变量：
@primary-color: var(--primary-color, #1890ff); - 然后在 JS 中操作：
document.documentElement.style.setProperty('--primary-color', '#ff4d4f'); - 四层命名必须完全一致：Less 变量名
@primary-color→ CSS 变量名--primary-color→ JS 设置名--primary-color→ CSS 使用名var(--primary-color)，错一个连字符或大小写就断链
真正难的不是写变量，而是让所有环节咬死同一套命名和层级——变量一旦跨文件引用，路径、作用域、覆盖顺序都会影响最终输出，稍不注意，@spacing 在某个组件里就悄悄被局部重定义了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
