我目前正在使用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);
....
}
答案 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!