CSS 中的 !important 可以覆盖任何样式规则，因此可以在样式中使用，但是过度使用会导致代码难以维护和扩展。在 SASS 中，!important 对于管理样式具有一定的优势，但应该谨慎使用。
什么是 !important？
在 CSS 样式规则中，!important 可以覆盖其他所有规则，即使其他规则具有更高的特殊性。例如，在以下代码中，红色文本颜色将覆盖黑色：
/*原css*/
p {
color: black;
}
p {
color: red !important;
}!important 通常用于临时修复其他样式表中的问题，但不推荐在新的样式表中过度使用。
SASS 中的 !important
在 SASS 中，!important 可以用于管理样式，以使代码更清晰和易于维护。下面是在 SASS 中使用 !important 的一些技巧和最佳实践。
用于复杂样式
在某些情况下，SASS 的嵌套和继承可能会导致样式冲突，这时候可以使用 !important 以保证样式不被覆盖。例如：
-- -------------------- ---- -------
-- ---- --
---------- -
------- -
------ -----
-
-------- -
------ --- -----------
-
-在这个示例中，article 类的颜色比 header 类更具体，但如果 header 类的样式表中存在 !important，article 类的样式就会被覆盖。使用 !important 可以确保文本在所有情况下为红色。
避免堆叠样式表
SASS 的一个主要优点是它允许您创建可以组合的小块样式，但这可能会导致重叠和任意的层叠样式表。在 SASS 中，可以使用 !important 来隔离这些样式。例如：
-- -------------------- ---- -------
-- ---- --
---------- -
------- -
------ -----
---------- ------ -----------
-------
-
-------- -
------ ----
---------- -------
-------
-
-在此示例中，.header 类在 SASS 中定义，并包含其他样式规则，例如边框，填充等。如果要让字体大小继承 .container 类，但不受 .header 类影响，可以在 .header 类的字体大小上使用 !important。
用于有意义的样式
在某些情况下，!important 可以用于确保代码的有意义，并避免出现默认、通用样式表。例如：
-- -------------------- ---- -------
-- ---- --
---------- -
-------- -----
-------
------ -
------- ---- -----------
----------------- ---- -----------
-------
-
-在此示例中，!important 用于覆盖所有按钮（button）元素上的默认边框和背景色。这么做可以确保您的样式仅适用于特定的按钮，并防止其他样式表中的通用样式表对您的样式造成干扰。
最佳实践
使用 !important 可以使代码更具体和控制，但如果过度使用，也会导致管理样式的难度增加。以下是在SASS中使用 !important 的最佳实践：
- 将 !important 用于复杂的样式或其它有意义的地方。
- 避免在样式表中过度使用 !important 。
- 如果使用 !important，应该将其添加在样式规则的最后。例如：
.container {
color: blue !important;
font-weight: bold;
/*...*/
}- 在SASS 中可以通过变量等方案避免使用 !important。
结论
!important 在 SASS 中可以用于管理和控制样式，但仍应该谨慎使用。最佳做法是仅在必要的地方使用 !important，并确保样式细节的先后顺序正确。如果您发现自己在重复使用 !important，考虑重新评估代码的结构，并使用其他方法以更好地管理样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67077bc9d91dce0dc869278b