用可选参数制作一个Sass混合

我正在写这样一个mixin：

@mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color $inset; -moz-box-shadow: $top $left $blur $color $inset; box-shadow: $top $left $blur $color $inset; } 

当调用我真正想要的是，如果没有$inset值传递，没有输出，而不是编译到这样的事情：

 -webkit-box-shadow: 2px 2px 5px #555555 ""; -moz-box-shadow: 2px 2px 5px #555555 ""; box-shadow: 2px 2px 5px #555555 ""; 

如何重写mixin，如果没有$inset值传递，什么都不输出？

Answer 1

做一个干的方法

而且，一般来说，删除报价是一个巧妙的诀窍。

 @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color #{$inset}; -moz-box-shadow: $top $left $blur $color #{$inset}; box-shadow: $top $left $blur $color #{$inset}; } 

SASS版本3+，你可以使用unquote() ：

 @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color unquote($inset); -moz-box-shadow: $top $left $blur $color unquote($inset); box-shadow: $top $left $blur $color unquote($inset); } 

在这里select了这个： 把一个列表作为SASS的一个单独的参数传给一个mixin

Answer 2

一个更好的干的方式

是通过$args...到@mixin 。 这样，不pipe你有多less个$args都可以通过。 在@input调用中，您可以传递所有需要的参数。 像这样：

 @mixin box-shadow($args...) { -webkit-box-shadow: $args; -moz-box-shadow: $args; box-shadow: $args; } 

现在，您可以通过传递所有需要的参数，在您想要的每个课堂中重复使用您的盒子阴影：

 .my-box-shadow { @include box-shadow(2px 2px 5px #555, inset 0 0 0); } 

Answer 3

Sass支持@if语句。 （请参阅文档 。）

你可以这样写你的mixin：

 @mixin box-shadow($top, $left, $blur, $color, $inset:"") { @if $inset != "" { -webkit-box-shadow:$top $left $blur $color $inset; -moz-box-shadow:$top $left $blur $color $inset; box-shadow:$top $left $blur $color $inset; } } 

Answer 4

您可以将该属性的默认值设置为null，如果您不传递该参数，则不会被解释。

 @mixin box-shadow($top, $left, $blur, $color, $inset:null) { -webkit-box-shadow: $top $left $blur $color $inset; -moz-box-shadow: $top $left $blur $color $inset; box-shadow: $top $left $blur $color $inset; } 

这意味着你可以像这样编写include语句。

 @include box-shadow($top, $left, $blur, $color); 

而不是像这样写。

 @include box-shadow($top, $left, $blur, $color, null); 

如这里的答案所示

Answer 5

老问题，我知道，但我认为这仍然是相关的。 可以说，一个更清晰的方法是使用unquote（）函数（SASS从3.0.0版本开始）：

 @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color unquote($inset); -moz-box-shadow: $top $left $blur $color unquote($inset); box-shadow: $top $left $blur $color unquote($inset); } 

这大致相当于Josh的回答，但是我认为显式命名的函数比string插值语法更less混淆。

Answer 6

我知道它不完全是你正在寻找的答案，但你可以传递"null"作为最后一个参数时@include box-shadow mixin，像这样@include box-shadow(12px, 14px, 2px, green, null); 现在，如果这个参数只有一个属性而不是该属性（和它的（默认）值）将不会被编译。 如果这个“行”上有两个或更多的参数，那么只有你没有被编译的参数（你的情况）。

CSS的输出完全是你想要的，但你必须写你的null s 🙂

  @include box-shadow(12px, 14px, 2px, green, null); // compiles to ... -webkit-box-shadow: 12px 14px 2px green; -moz-box-shadow: 12px 14px 2px green; box-shadow: 12px 14px 2px green; 

Answer 7

这里是我使用的解决scheme，下面是注​​释：

 @mixin transition($trans...) { @if length($trans) < 1 { $trans: all .15s ease-out; } -moz-transition: $trans; -ms-transition: $trans; -webkit-transition: $trans; transition: $trans; } .use-this { @include transition; } .use-this-2 { @include transition(all 1s ease-out, color 2s ease-in); } 

• 喜欢传递属性值作为本地CSS来保持接近“舌头”
• 允许传递可变数目的参数
• 定义一个懒惰的默认值

Answer 8

用sass@3.4.9：

 // declare @mixin button( $bgcolor:blue ){ background:$bgcolor; } 

并没有使用价值，button将是蓝色的

 //use .my_button{ @include button(); } 

和值，button将是红色的

 //use .my_button{ @include button( red ); } 

与hexa一起工作

Answer 9

 @mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) { @if $inset { -webkit-box-shadow: inset $left $top $blur $color; -moz-box-shadow: inset $left $top $blur $color; box-shadow: inset $left $top $blur $color; } @else { -webkit-box-shadow: $left $top $blur $color; -moz-box-shadow: $left $top $blur $color; box-shadow: $left $top $blur $color; } } 

Answer 10

我是新来的CSS编译器，希望这有助于，

  @mixin positionStyle($params...){ $temp:nth($params,1); @if $temp != null{ position:$temp; } $temp:nth($params,2); @if $temp != null{ top:$temp; } $temp:nth($params,3); @if $temp != null{ right:$temp; } $temp:nth($params,4); @if $temp != null{ bottom:$temp; } $temp:nth($params,5); @if $temp != null{ left:$temp; } .someClass{ @include positionStyle(absolute,30px,5px,null,null); } //output .someClass{ position:absolute; top: 30px; right: 5px; }