有没有办法使用 scss 将 !important 添加到多个 css 值？答案

【问题标题】：Is there a way to add !important to multiple css values with scss?有没有办法使用 scss 将 !important 添加到多个 css 值？
【发布时间】：2016-10-17 11:31:41
【问题描述】：

假设我有几个类需要能够将!important 添加到类中的值中。有没有一种有效的方法来做到这一点？我还在学习scss，所以如果有人问我真的很抱歉，我只是无法找到答案。

更新

我确实发现我可以创建一个变量并将其添加到每个值的末尾，如下所示：

$i: !important;
$button-background-color: #03A9F4;
$button-color: #fff;

.button {
  border-radius:2px$i;
  color: $button-color$i;
  background-color: $button-background-color$i;
  -webkit-transition:all .3s$i;
  transition:all .3s$i;
  border:0px$i;
  padding:0px$i;
  &:hover {
    background-color: lighten( $button-background-color, 20% )$i;
  }
  &.primary {
    height: 40px$i;
  }
  &.secondary {
    height: 30px$i;
    padding:0 10px$i;
  }
}

这是最快的方法吗？

【问题讨论】：

标签： css sass

【解决方案1】：

通常当 css 文件结构良好时，您不会经常使用 !important，除非您需要动态覆盖某些行为。 css规则是从上到下写的，最后一个优先。还要注意如何导入 scss 文件。要避免使用 !important 的另一件事是特异性。内联元素具有最高的特异性，然后是 id，然后是类，然后是元素本身。如果您仔细查看所有这些规则，您最终应该会使用 !important very Rare。

【讨论】：

好的，但在我的情况下它不是可选的，所以我需要知道它是否可能，而不是它是否好用。
我不知道在 css/sass 中是否有快速解决方案。如果这是您需要的，您的方法似乎很好。至于动态添加的 !important 也许你可以查看this 文章并在你的代码中使用它。

【解决方案2】：

我认为使用 scss 的最佳方法是将特异性加倍。你可以这样做：

.parent.parent {}

里面的一切都会有更高的特异性。

【讨论】：

【解决方案3】：

!important 不对，可以通过在css中添加其父类来管理，如 .footer .content 或者如果有多个css文件，则更改css文件位置，高优先级的css文件必须低于低优先级的css文件级别 css 文件。

【讨论】：

这可能不是最佳实践，但它的存在是有原因的。无论哪种方式，这都不是答案。