SASS是否支持在混入中的所有属性中添加！important？

猪猪A2020-03-24

我目前正在使用罗盘框架及其所有有用的CSS3 mixins。我想使用border-radius(5px)mixin并将所有来自它的属性标记为!important

在LESS中，可以!important通过在调用后简单地指定它来将其应用于mixin中的所有属性

.myMixin(@x) {
    border-radius: @x;
    -moz-border-radius: @x;
}

.myClass {
  .myMixin(5px) !important;
}

编译为

.myClass {
    border-radius: 5px !important;
    -moz-border-radius: 5px !important;
}

这在SASS中是可能的，还是我必须用一个重要的参数重写mixins？

@mixin my-border-radius($value, $important: false) {
    border-radius: @value if($important, !important, null);
    ....
}

Mandy村村2020/03/24 09:56:12

混合：

@mixin verlauf($color1, $color2) {
  background: $color1;
  background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
  background: -webkit-linear-gradient(top, $color1 0%,$color2 100%);
  background: linear-gradient(to bottom, $color1 0%,$color2 100%);
}

SCSS：

 @include verlauf(#607a8b !important, #4b6272 !important);

结果：

background: #607a8b !important;
background: -moz-linear-gradient(top, #607a8b !important 0%, #4b6272 !important 100%);
background: -webkit-linear-gradient(top, #607a8b !important 0%, #4b6272 !important 100%);
background: linear-gradient(to bottom, #607a8b !important 0%, #4b6272 !important 100%); }

它也可以与两个（和更多）变量mixin一起使用！

泡芙2020/03/24 09:56:12

Cander的答案适用于简单变量，其后没有任何其他属性。对于更复杂的CSS，您可以这样操作，例如transition属性：


    @mixin transition（$ duration，$ content：null）{
        -webkit-transition：所有$ duration线性$ content;
        -moz-transition：所有$ duration线性$ content;
        -o-transition：所有$ duration线性$ content;
        过渡：所有$ duration线性$ content;
    }

我添加了$content变量并将其设置为null。现在，您可以使用以下命令来简单地调用mixin：

@include transition(0.3s);

如果要添加!important，请使用

@include transition(0.3s, !important);

谢谢！

番长2020/03/24 09:56:12

答案几乎太明显了……

!important 可以简单地指定为属性值的一部分