SASS是否支持添加!对mixin中的所有属性都很重要?

时间:2013-11-29 15:15:41

标签: sass compass-sass

我目前正在使用compass framework以及所有有用的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);
    ....
}

3 个答案:

答案 0 :(得分:27)

答案太明显了......

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

border-radius(5px !important);

答案 1 :(得分:4)

Cander的答案适用于简单变量,其后没有任何其他属性。你可以这样做,对于更复杂的CSS,比如过渡属性:


    @mixin transition($duration, $content:null) {
        -webkit-transition:all $duration linear $content;
        -moz-transition:all $duration linear $content;
        -o-transition:all $duration linear $content;
        transition:all $duration linear $content;
    }

我添加了$content变量并将其设置为null。现在你可以通过以下方式调用mixin:

@include transition(0.3s);

如果您想添加!important,请使用

@include transition(0.3s, !important);

谢谢!

答案 2 :(得分:1)

密新:

@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!