SASS 中关于！important 的使用建议
在前端开发中，CSS 是不可避免的一部分，而 SASS 则是 CSS 的一种预处理语言。在使用 SASS 进行 CSS 开发的过程中，!important 是一个很常用的关键字，但是在使用中却往往会出现不必要的问题。
在这篇文章中，我们将探讨 SASS 中关于 !important 的使用建议，并给出一些相关的示例代码和学习指导。
- 了解 !important
首先，我们需要了解 !important 的含义。在 CSS 中，使用 !important 可以覆盖其他样式的优先级，即使这些样式的优先级比较高。使用 !important 可以使得某个特定的样式更具有优先级，但也可能造成代码混乱和维护困难。
- 不要过分使用 !important
在开发中，很多人都会出现这样的情况：CSS 样式出现了混乱，于是乎就疯狂使用 !important 覆盖其他样式。这一做法虽然可以姑且解决问题，但是会带来两个问题：
首先，会使得代码变得混乱。如果对一个样式使用了 !important，而其他样式也用了这个关键字，那么代码就难以理解，也难以维护。
其次，使用 !important 可能会使得 CSS 样式的优先级变得不可控。如图所示：
.test {
font-size: 20px !important;
}
.test p {
font-size: 12px;
}在这段代码中，由于 !important 的出现，我们无法确定 .test p 的字体大小。在这种情况下，我们往往需要重新修改样式表，这也说明了使用 !important 的不可控性。
- 合理使用 !important
虽然我们不应该过分使用 !important，但在某些情况下，它是必须的。比如说，我们的项目需要支持不同的浏览器，而这些浏览器对一些 CSS 属性的解析是不同的。这时候，就需要借助 !important 来解决问题。
为了更好地理解 !important 的用途，下面我们提供一些示例代码：
-- -------------------- ---- -------
-- -- - --
----- -
------ ----
-
------ -
------ ---- -----------
-
-- -- - --
----- -
---------- ---- -----------
-
-------- -
---------- -----
-
------ ----------- ------ -
----- -
---------- ---- -----------
-
-在示例 1 中，我们使用了 !important 来覆盖了 .test 的颜色，来完成一个特别的样式需求。在示例 2 中，我们使用了 !important 以及媒体查询来解决了不同屏幕尺寸下字体大小不兼容的问题。
- 总结
在 SASS 中使用 !important 是很常见的做法，但是我们需要注意其使用程度。不要过分使用 !important，会使代码变得混乱和难以维护同时使用 !important 也需要注意它对 CSS 优先级的影响。
合理使用 !important 可以解决一些突发问题，但是也需要记住使它尽可能不影响 CSS 的维护。
示例代码：https://codepen.io/alyez/pen/gOWMNyG
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a755d648841e98943d73d1