css - 将 `!important` 添加到 mixin

Question

我想将 !important 添加到混入中。我尝试了以下两种方式，它们都返回错误:

@include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)); !important

@include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)) !important;

有没有办法正确地做到这一点？

Answer 1

在某些情况下，我使用名为 $important 的可选参数，我可以将其传入 true。

例子:

my-mixin($important: true);

它看起来像那样，有一个辅助函数来避免重复我必须切换的属性 important:

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

@mixin my-mixin($important: false) {
  border-radius: 0; //whatever
  border: 1px solid #ccc if-important($important);
  background-color: #fff if-important($important);
  color: #000 if-important($important);
}