LESS 中如何使用！important 来覆盖默认样式

LESS 中如何使用 !important 来覆盖默认样式

CSS 是前端开发中最基础的语言之一，几乎每个网页都需要使用它。 而在 CSS 中，!important 是一个很重要的标记，它可以强制覆盖 CSS 样式中默认的优先级。 LESS 是一种动态样式语言，也可以使用 !important 标记，但是在处理 !important 时比较特殊。

LESS 中的 !important

在 LESS 中，!important 用于覆盖默认样式，语法与 CSS 相同，但在 LESS 中应用 !important 时有些不同。 在 LESS 中，!important 主要分为两类：在变量中使用和在样式表中使用。

在变量中使用 !important：

变量是 LESS 中非常有用的一种工具。 我们可以将常用的属性值保存在变量中，方便统一管理。 例如，我们常常使用一个通用的字体大小。 在 LESS 中使用变量可轻松定义并减少样式表代码量。

font-size: @fontSizeImportant !important;

在 LESS 变量中使用 !important 标记非常方便，只需将其加入变量中即可。 LESS 变量可以在项目中的任何地方使用，并且在需要修改变量时可以统一进行更改。

在样式表中使用 !important：

在 LESS 样式表中使用 !important 标记，需要注意一些细节。 因为 LESS 是一种动态编译语言，可以在编译过程中计算结果。

.colorClass{color: red !important;}

LESS 样式表中使用 !important 标记，必须考虑到其优先级问题。通常情况下，越具体的元素和类拥有更高的优先级。因此，在 LESS 样式表中，为了避免使用 !important 标记，我们应该尽量避免使用全局选择器，并给每个元素分配唯一的 ID。另外，我们可以在 LESS 中使用变量，统一设置一些属性值，使代码更简化，增强代码可读性。

例如：

.container{ width: 500px; height: 200px; background-color: @bgColorImportant; }

.container div{ color: @fontColorImportant; }

.container #header{ font-size: @fontSizeImportant; }

总结：

使用 !important 的根本原因是为了覆盖默认的样式优先级，因此我们应该在需要的时候使用它。但是，为了避免使用 !important 标记，我们应该尽可能地掌握 CSS 的优先级规则，以免出现代码重复和不必要的复杂性。

LESS 中，使用 !important 标记的具体方法是：在变量中使用和在样式表中使用。 在变量中使用 !important 标记很方便，而在样式表中使用则需要根据具体项目情况，灵活运用。

示例代码：

@fontSizeImportant: 16px; @bgColorImportant: #f2f2f2; @fontColorImportant: #333;

.container{ width: 500px; height: 200px; background-color: @bgColorImportant; }

.container div{ color: @fontColorImportant; }

.container #header{ font-size: @fontSizeImportant; color: red; }

.container div span{ font-size: @fontSizeImportant + 2; }

.container div span.big{ font-size: @fontSizeImportant + 4; }

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64686222968c7c53b089c552