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

SASS是否支持添加!对mixin中的所有属性都很重要?,sass,compass-sass,Sass,Compass Sass,我目前正在使用和它的所有有用的CSS3混合。我想使用边界半径(5px)mixin,并用标记来自它的所有属性!重要信息 在中,可以应用!重要信息只需在调用后指定mixin中的所有属性即可 .myMixin(@x) { border-radius: @x; -moz-border-radius: @x; } .myClass { .myMixin(5px) !important; } 编译成 .myClass { border-radius: 5px !importa

我目前正在使用和它的所有有用的CSS3混合。我想使用
边界半径(5px)
mixin,并用
标记来自它的所有属性!重要信息

在中,可以应用
!重要信息
只需在调用后指定mixin中的所有属性即可

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

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

.myClass {
    border-radius: 5px !important;
    -moz-border-radius: 5px !important;
}
这在中是可能的,还是我必须用一个重要参数重写mixin

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

答案几乎太明显了

!重要信息
可以简单地指定为属性值的一部分

border-radius(5px !important);

坎德的答案适用于简单变量,这些变量后面没有任何其他属性。对于更复杂的CSS,如transition属性,您可以这样做:

@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; } @mixin转换($duration,$content:null){ -webkit转换:所有$duration linear$内容; -moz转换:所有$duration线性$content; -o-转换:所有$duration线性$content; 转换:所有$duration线性$content; } 我添加了
$content
变量,并将其设置为
null
。现在,您可以使用以下命令将mixin称为simple:

@包括转换(0.3s)

如果您想添加
!重要信息
,请使用

@包括转换(0.3s,!重要)

谢谢

Mixin:

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

结果:

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一起使用

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%); }