less断点变量无法覆盖，因其仅按线性顺序取最后一次赋值，不支持运行时覆盖或作用域遮蔽；正确做法是用参数化mixin替代全局变量。
Less 断点变量（比如 @screen-sm）无法“覆盖”，根本原因不是它拒绝被改，而是你试图覆盖的方式撞上了 Less 编译器的变量模型——它压根不支持“运行时覆盖”或“作用域内遮蔽”，只认线性顺序下的最后一次赋值。
断点变量本质是普通 Less 变量，不是 CSS 自定义属性
很多人误以为 @screen-sm 类似 --screen-sm，能像 CSS 变量一样在某个容器里重声明生效。但事实是：@screen-sm 在编译时就被替换成字面值（如 768px），生成的媒体查询里根本不会出现变量名。你改的不是“值”，而是“替换前的占位符”，且只能改一次。
- 写
@screen-sm: 768px;→ 编译后所有@media (min-width: @screen-sm)全变成@media (min-width: 768px) - 后面再写
@screen-sm: 992px;→ 所有**后续**引用（包括同一文件里靠后的@media）都会用992px，前面已编译的不会回溯 - 嵌套里写
.theme-dark { @screen-sm: 992px; @media (min-width: @screen-sm) { ... } }→ 这个媒体查询确实会用992px，但同时也会污染之后所有@screen-sm引用
常见错误：用 CSS 变量思维操作 Less 断点
你可能尝试这样写：
.card {
--screen-sm: 992px;
@media (min-width: var(--screen-sm)) { ... }
}
这行不通——Less 不解析 var()，它只认 @screen-sm 这种语法；而浏览器也不认识 @media (min-width: var(--screen-sm))，因为 var() 在媒体查询中不合法（截至 2026 年仍被大多数浏览器拒绝）。
- Less 编译阶段：不认识
var(--screen-sm)，直接原样输出，导致 CSS 无效 - 浏览器运行时：不支持
var()在@media中，规则被忽略 - 真正有效的写法只有：
@media (min-width: @screen-sm) { ... }，且@screen-sm必须提前定义好
想实现“不同模块用不同断点”，别改变量，换 mixin
与其折腾变量覆盖，不如把断点逻辑封装进参数化 mixin。变量是全局扁平表，mixin 是函数式隔离单元——这才是 Less 里安全复用的正路。
- 定义：
.responsive(@breakpoint: 768px) { @media (min-width: @breakpoint) { @arguments(); } } - 调用：
.card { .responsive(992px) { padding: 20px; } }，不影响其他组件 - 好处：不依赖全局变量、无覆盖风险、可嵌套、可传表达式（如
@screen-lg - 1） - 注意：
@arguments()必须写在 mixin 内部，不能漏掉，否则样式块不会注入
最容易被忽略的是：你每次保存 @screen-sm 的修改，其实都在改一个全局开关，而不是某个组件的配置。调试时别盯着 DevTools 里的媒体查询看——它只显示最终结果，要查变量实际在哪被最后一次赋值，得翻编译输出或全局搜索 @screen-sm:。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
