SASS 是不是支持向 mixin 中的所有属性添加 !important？

Posted 2023-03-07

【中文标题】SASS 是不是支持向 mixin 中的所有属性添加 !important？

【英文标题】：Does SASS support adding !important to all properties in a mixin?SASS 是否支持向 mixin 中的所有属性添加 !important？

【发布时间】：2013-12-15 19:54:12

【问题描述】：

我目前正在使用compass framework 和所有有用的 CSS3 混合。我想使用 border-radius(5px) mixin 并将所有来自它的属性标记为 !important

在LESS 中，只需在调用后指定!important 即可将!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 中是否可行，还是我必须用一个重要的参数重写mixin？

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

【参考方案1】：

答案几乎太明显了......

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

border-radius(5px !important);

【参考方案2】：

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

@mixin 转换($duration, $content:null) -webkit-transition:all $duration 线性 $content; -moz-transition:all $duration 线性 $content; -o-transition:all $duration 线性 $content; 过渡：所有 $duration 线性 $content;

我添加了$content 变量并将其设置为null。现在你可以简单地调用 mixin：

@include transition(0.3s);

如果你想添加!important，请使用

@include transition(0.3s, !important);

谢谢！

【参考方案3】：

混音：

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