使用Compass Mixin添加!important

Question

如果我使用指南针CSS并使用函数或mixin如:

   @include background-image(linear-gradient(#a3cce0, #fff)); 

是否有任何简单的方法让罗盘添加!对它生成的每一行都很重要？

Answer 1

您可以将它包含在mixin中,如下所示:

@include border-radius(5px !important);

指南针将输出以下内容:

-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;

Answer 2

更新:现在新版本的sass支持这种语法:

@include border-radius(5px !important);

就这样做(如@naoufal回答中所述).

---老答案---

你不能使用!重要的罗盘混合,但罪魁祸首不是指南针,你应该责怪sass.

@include border-radius(5px) !important; #=> SASS Syntax Error

Answer 3

只是花了几个小时才弄清楚这一点，但你可以做一个快速的技巧。在 SASS 文件的顶部添加以下内容：

$i: unquote("!important");

按照您的风格执行以下操作：

color: #CCCCCC $i;

输出是：

color: #CCCCCC !important;

完整样本：

$i: unquote("!important");

.some-style {
    color: white $i;
}

输出：

.some-style {
    color: white !important;
}

Answer 4

实际上，您可以使用 a@function来处理，!important同时保持混音本身的灵活性。例如：

@function is-important($important){
  @return #{if($important, '!important', '')};
}

// by default we don't want the !important at the end
@mixin button-primary($important: false) {
  font-size: 14px;
  background: #fff is-important($important);
  color: #000 is-important($important);
}

希望能帮助到你！