less中!important只在mixin调用时生效，作用于生成的每条css声明末尾；定义处添加无效，嵌套调用不自动继承，优先采用高特异性选择器替代。
Less 中的 !important 不能“提升混合（mixin）本身”的优先级，它只作用于 mixin 展开后生成的每一条 CSS 声明——而且必须显式写在调用处，不是定义处。
Less mixin 调用时加 !important 才生效
你在 mixin 定义里写 !important 是无效的；只有在调用时加，编译器才会把 !important 插入到最终生成的每条样式声明末尾。
-
.btn { .border-radius(4px) !important; }→ 编译为.btn { border-radius: 4px !important; } -
.border-radius(@r) { border-radius: @r; }里哪怕写了!important，也不会透出到调用方 - 多个属性同时生效：如果
.shadow()包含box-shadow和filter，.shadow() !important会让这两条都带!important
嵌套 mixin + !important 容易漏掉子规则
当一个 mixin 内部又调用了另一个 mixin，而你只在外层调用加了 !important，内层被调用的 mixin 不会自动继承这个标记——除非它也被显式加了 !important。
- 例如：
.card { .flex-center(); .hover-effect() !important; }→ 只有.hover-effect生成的样式带!important，.flex-center的不带 - 想统一提权，得每个调用都加，或改用更具体的选择器（比如
.card.is-urgent）来自然提高权重 - 调试时容易误判：看到部分样式覆盖了，就以为全生效了，结果 hover 状态还是被压住
比 !important 更可控的替代方案
真正需要强覆盖时，优先考虑构造更高特异性的选择器，而不是依赖 !important——尤其在多人协作或长期维护的项目里。
- 用 BEM 命名 + 嵌套收束：
.btn { &--primary { background: #007bff; } }→.btn--primary比.btn权重高，且不污染全局 - 利用
@import顺序控制层叠：把定制样式文件放在所有基础组件之后导入，相同选择器下靠后即覆盖 - 对第三方不可控样式（如 CMS 输出或 JS 动态插入的内联 style），
!important是合理选择，但应限制在最小作用域，例如.cms-content p img { max-width: 100% !important; }
最常被忽略的一点：Less 编译后仍是纯 CSS，!important 的行为完全遵循浏览器层叠规则——它不解决设计混乱，只掩盖优先级冲突。一旦开始堆 !important，说明变量、命名或文件分层已经失控了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
