在前端开发中，!important 是一个熟悉的属性，通常用于添加样式时强制应用某个属性或者说取消继承。LESS 作为一种 CSS 预处理器，同样支持 !important 属性，不过相比于普通的 CSS，它有着更为丰富的使用场景和更优雅的语法。本文将详细讲解 LESS 中的 !important 属性，包括语法、作用及使用技巧。
1. !important 的语法
在 LESS 中，添加 !important 很简单，使用方式与 CSS 相同，只需要在属性值后面加上 !important 即可。下面是一个例子：
font-size: 16px !important;
2. !important 的作用
通常情况下，我们在应用样式时，都是按照从上到下的顺序进行样式覆盖的。例如，下面的代码中，后面的样式会覆盖前面的：
h1 {
font-size: 16px;
}
h1 {
font-size: 18px;
}在这个例子中，h1 的字号最终会被设置为 18px。但是，当我们需要修改一个已经继承了某种样式的元素时，只使用上述代码是无效的。例如：
body {
font-size: 16px;
}
h1 {
font-size: inherit;
}在这个例子中，h1 继承了 body 的字号，字号将会自动设置为 16px。如果我们需要修改 h1 的字号，我们可以像下面这样写：
h1 {
font-size: 24px !important;
}这样就可以更改 h1 的字号为 24px，不受 body 的影响。除了覆盖继承样式外，!important 还可以被用来添加样式，例如：
.hide {
display: none !important;
}这个例子中，添加了一个 .hide 类，它的 display 属性被设置为 none，并且使用了 !important，这意味着无论在哪里应用 .hide 类，它都会被隐藏。
3. !important 的使用技巧
虽然 !important 属性相当便捷，但当我们滥用它时，可能会导致一些严重的问题：
对于维护样式表的开发者来说，过多的 !important 使用会使样式表变得难以理解和修改，尤其是当 !important 空间被多个人使用时。
它可能对响应式设计产生负面影响，导致在某些设备上样式错误或无法正确响应。
它可能与模块化 CSS 模式产生冲突。
因此，我们建议仅在以下情况下使用 !important：
在一个高度概括化的 CSS 文件中，可能会覆盖由其他文件定义的属性。
当调试时，需要强制应用特定的样式，以确保其起作用。
在响应式设计的特定情况下，需要覆盖某些预定义的样式。
在修改继承样式时，以确保元素呈现出适当的样式。
总结
在将 !important 用于样式时，需要知道它的用途和限制。虽然 LESS 支持 !important，但它并不是最好的解决方案。现代的前端开发应使用 CSS 架构和开发技术，以减少对 !important 的依赖，以确保样式表具有可维护性和扩展性。当我们必须使用 !important 时，我们应该判断并选择使用场景，以确保我们正确地实现了需要实现的样式效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481960848841e989410f9c2