在 Less 中，!important 是编译期指令，仅能整体作用于 mixin 调用，必须写在括号后（如 .mixin() !important），会使 mixin 内所有生成的 CSS 声明均带上 !important，不支持选择性添加、参数传入或动态控制。

在 Less 中，!important 只能作用于整个 mixin 调用，不能选择性加到某几个属性上；它不是 CSS 层面的修饰符，而是编译期指令，必须紧贴 mixin 调用末尾、括号之后（或省略括号时紧贴 mixin 名）。

调用 mixin 时加 !important 的写法和位置

Less 编译器只识别 .mixin() !important 或 .mixin !important 这两种合法形式。空格可选但建议保留，!important 必须在括号**之后**（即使括号省略），不能塞进括号里，也不能写成 .mixin(!important) —— 后者会被当作参数传入，完全无效。

• .foo() !important ✅ 正确：括号存在，空格可选
• .foo !important ✅ 正确：括号省略，常见于无参 mixin
• .foo(!important) ❌ 错误：编译器认为你传了一个叫 !important 的字符串参数
• .foo()!important ✅ 可工作但不推荐：无空格易读错，部分编辑器语法高亮可能异常

!important 会作用于 mixin 内所有声明的属性

它不是“覆盖某个属性”，而是把 mixin 体中**每个生成的 CSS 声明**都追加 !important。哪怕 mixin 里用了嵌套、条件、循环，只要最终输出了某条 CSS 规则，那条规则就会带 !important。

• 如果 mixin 包含 &:hover，那么 color: red 和 border: 1px solid blue 都会变成 color: red !important 等
• 如果 mixin 引用了另一个 mixin（比如 .reset() { margin: 0; padding: 0; }），而你在调用时写了 .reset() !important，那它内部所有属性都会被标记，但不会影响外层其他样式
• 它**不递归影响被引用的 mixin 的调用方式**：即 .outer() { .inner(); }，你在 .outer() !important 不会让 .inner() 自动变 !important

容易踩的坑：优先级陷阱与调试反模式

很多人加 !important 是为了压过第三方库或 inline style，但 Less 编译后生成的是普通 CSS，!important 的实际效果仍受 CSS 层叠规则约束——它只提升单条声明的权重，不改变选择器特异性（specificity）。真正难搞的往往是特异性冲突，而非缺失 !important。

• 加了 !important 仍被覆盖？检查是否被更高特异性的 !important 覆盖（比如 #app .modal button:hover vs 你的 .btn !important）
• 调试时临时加 !important 很方便，但上线前务必清理：它会让后续维护者无法用常规方式覆盖样式，尤其在组件化场景下极易引发连锁问题
• 不要对带参数的 mixin 直接加 !important 后再覆盖某属性——例如 .text(@size) { font-size: @size; color: #333; }，你写 .text(16px) !important 会导致 color 也锁死，后期想单独改颜色就得再加一层 !important，恶性循环

真正需要批量强制覆盖时，!important 是快捷键；但它的代价是牺牲样式可预测性。最常被忽略的一点：它只在编译时生效，无法通过 JavaScript 动态控制，也不支持变量插值（@priority: important; .mixin() @{priority} ❌ 不工作）。