SASS 为 mixin 中的每个属性添加重要内容

Question

有没有办法将 !important 添加到 中的每个属性@mixin？

例如：

@mixin myMixin {
    color:red;
    border:1px solid red;
    position:relative;
    ...
}
p {
    @include myMixin(!important);
    //or
    //@include myMixin!important; => SASS Syntax Error
}

这是CSS的结果

p {
    color:red;
    border:1px solid red;
    position:relative;
    ...
}

我想要这个

p {
    color:red!important;
    border:1px solid red!important;
    position:relative!important;
    ...
}

Answer 1

尽管不建议使用!important来覆盖 CSS 属性，但是您可以使用@each来迭代地图并执行字符串插值。

@mixin myMixin($str){
  $prop : (
    color:red,
    border:1px solid red,
    position:relative
  );
  @each $key, $value in $prop {
    #{$key}: #{$value} #{$str};
  }
}
p{
    @include myMixin(!important);
}