变量是编译期可控的统一入口，用@breakpoint-md: 768px;等语义化数值变量替代硬编码，可确保响应式断点、主题色、间距等全局一致，支持运算与跨文件引用，避免搜索替换遗漏和作用域失控。
硬编码数值导致全局搜索替换失效
当你在多个 @media 规则里直接写 @media (min-width: 768px)，而设计规范突然把「中屏断点」从 768px 改成 750px，就得手动全局搜索替换所有散落位置。漏改一处，@media (min-width: 768px) 就和布局系统脱节——比如平板横屏样式不生效，或和 .col-md-* 栅格错位。
变量才是编译期可控的统一入口
Less 变量是纯文本替换，不带运行时逻辑，但正因如此才稳定可靠：
-
@breakpoint-md: 768px;定义后，所有@media (min-width: @breakpoint-md)都同步更新 - 别用字符串赋值：
@breakpoint-md: "768px";会导致@media编译失败——Less 要求数值类型必须带单位，不能是字符串 - 命名要语义化：
@screen-md比@bp768更利于协作；@spacing-lg比@m24更易被下游理解
硬编码会破坏响应式与主题系统的联动
一个项目里 color: #1890ff; 出现 37 次，改主色就得逐个找、逐个换；而定义 @primary-color: #1890ff; 后，所有 color: @primary-color; 自动响应变更，连 :hover、:disabled、伪类都一并覆盖。
更关键的是：变量支持简单运算，比如 @spacing-lg: @spacing * 2;，改基础间距 @spacing，整个系统自动缩放。硬编码数值完全无法参与这类推导。
跨文件引用时作用域容易失控
真正难的不是写变量，而是让所有环节咬死同一套命名和层级：
-
@import顺序决定变量覆盖优先级，后导入的文件能覆盖先导入的同名变量 - 嵌套作用域内可局部重定义变量，但容易误覆盖导致意外交互
- 变量名一旦跨文件引用，路径、作用域、覆盖顺序都会影响最终输出——稍不注意，
@spacing在某个组件里就悄悄被局部重定义了
这比语法错误更隐蔽：编译无报错，浏览器也正常渲染，但某处边距突然变大两倍，排查成本远高于一开始就收敛到单一变量源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
