!important不是正解，因其引发权重死循环；Mixin通过构造高权重选择器（如.highter-spec()生成.btn.btn）可控提权，优于暴力!important。
为什么 !important 不是解决样式覆盖的正解
用 !important 强行提权，短期能压住冲突，但很快会陷入“谁更 !important”的死循环。Less 编译后仍是标准 CSS，权重规则没变——选择器越具体、声明越靠后，优先级越高。Mixin 的价值不是绕过规则，而是帮你**可控地构造高权重选择器**，而不是靠暴力。
- 浏览器计算权重时，
.btn.primary:hover比.btn:hover高，跟是否用 Less 无关 - Mixin 本质是生成更长、更具体的选择器，比如把
.btn扩展成.component-name .btn - 滥用
!important会让后续维护者无法用常规方式覆盖，连调试面板里都难定位来源
用 extend() 还是带命名空间的 .override() Mixin？
Less 的 extend() 看似省事，但它在编译时做的是“合并选择器”，不生成新类名，对覆盖场景帮助有限；而自定义的重写 mixin（如 .override()）才是真正可控的权重提升工具。
-
extend()只适用于想复用样式逻辑的场景，比如多个组件共用圆角和阴影，它不改变原始选择器权重 -
.override()类 mixin 通常通过嵌套父选择器实现，例如：.override(@selector) { &@{selector} { // 样式 } } - 调用时写
.override('.btn.primary')，最终生成的选择器是.my-component .btn.primary，天然比孤立的.btn.primary权重高
真实项目中容易漏掉的权重陷阱
很多人写了 mixin 却发现还是被覆盖，问题往往不在 Less 语法，而在 HTML 结构或作用域控制失效。
- 父容器 class 名动态生成（比如 React 的
data-reactroot或 Vue 的v-xxx），导致你预设的命名空间选择器根本没匹配上 - 全局样式表加载顺序错乱：你的 override mixin 编译后的 CSS 被放在了第三方库样式之前，白写了
- 用了
:not()、属性选择器[type="submit"]等高权重组合，但没在 mixin 中同步模拟，结果新样式反而被这些低频但高权的选择器压住
一个轻量但可靠的 .higher-spec() Mixin 写法
不依赖复杂命名空间，也不硬编码组件名，用两次嵌套确保权重稳定：
立即学习“前端免费学习笔记（深入）”；
.higher-spec() {
& & {
// 这里写要提升权重的样式
}
}
调用 .btn { .higher-spec(); color: red; }，编译后变成 .btn.btn { color: red; } —— 权重从 10 → 20（class ×2），且完全不依赖外部 class。
- 适合局部强覆盖，比如弹窗按钮在 Modal 里必须变红，不管外层怎么套
- 不引入新 class，不影响 HTML 结构和 JS 查询逻辑
- 比加
!important更易被后续样式覆盖（只要对方也用.higher-spec()）
