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

上次我遇到了这个问题而且我用更强的选择器覆盖了指南针的风格。我刚刚在我的html元素上添加了一个ID

span { @include border-radius(5px);}

span#no-radius { @include border-radius(0px); } // override

Answer 4

我在搜索类似问题时出现了这个问题，但是我只是想补充说Making a Sass mixin with optional arguments是另一种我觉得有用的方法。

将inset替换为important，并在需要时传递!important。

Answer 5

花了好几个小时搞清楚这一点，但你可以做一个快速的伎俩。在SASS文件的顶部添加以下内容：

$i: unquote("!important");

以你的风格

执行以下操作：

color: #CCCCCC $i;

输出是：

color: #CCCCCC !important;

完整样本：

$i: unquote("!important");

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

输出：

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

Answer 6

实际上，您可以使用@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);
}

希望有帮助！

使用Compass Mixin添加！important

6 个答案: