在 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:hovervs 你的.btn !important） - 调试时临时加
!important很方便，但上线前务必清理：它会让后续维护者无法用常规方式覆盖样式，尤其在组件化场景下极易引发连锁问题 - 不要对带参数的 mixin 直接加
!important后再覆盖某属性——例如.text(@size) { font-size: @size; color: #333; }，你写.text(16px) !important会导致color也锁死，后期想单独改颜色就得再加一层!important，恶性循环
真正需要批量强制覆盖时，!important 是快捷键；但它的代价是牺牲样式可预测性。最常被忽略的一点：它只在编译时生效，无法通过 JavaScript 动态控制，也不支持变量插值（@priority: important; .mixin() @{priority} ❌ 不工作）。
