LESS 是一种 CSS 预处理器，可以通过它来更加方便地写出 CSS 样式。而在编写 CSS 样式的过程中，我们经常会遇到需要添加 !important 规则，以覆盖其他同样具有样式的元素。那么在 LESS 中，如何使用 !important 呢？下面是详细步骤。
步骤一：编写 LESS 样式
首先我们需要编写 LESS 样式。假设我们有一个 div 元素需要设置背景颜色为红色。我们可以这样写：
div {
background-color: red;
}步骤二：定义 LESS 变量
接下来我们定义一个 LESS 变量，用来存储需要覆盖的样式。假设我们需要覆盖上面的背景颜色为蓝色，我们可以这样写：
@color: blue;
步骤三：使用 !important
最后，我们需要在需要覆盖的样式末尾添加 !important 规则，以确保它能够覆盖其他同样具有样式的元素。需要注意的是，要使用 LESS 变量的值，需要使用 ${} 语法。我们可以这样写：
div {
background-color: @color !important;
}这样，就可以成功地将背景颜色设置为蓝色。
示例代码
-- -------------------- ---- ------- -- ---- -- --- - ----------------- ---- - -- ---- -- ------- ----- -- ---- -- --- - ----------------- ------ ----------- -
总结
在 LESS 中使用 !important 规则非常简单，只需要在需要覆盖的样式末尾添加 !important 即可。需要注意的是，在 LESS 中使用变量时需要使用 ${} 语法。这样可以帮助我们更加方便地编写样式，提高生产效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7a27d48841e989441f627