较少CSS参数混合默认空值不起作用

我有lesscss mixin用于

box shadow

如下：

.box-shadow(@x, @y, @blur, @color, @addit: ''){
    -webkit-box-shadow: @x @y @blur @color @addit;
    -moz-box-shadow: @x @y @blur @color @addit;
    box-shadow: @x @y @blur @color @addit;
}

如您所见，有一个参数

@addit

默认设置为

'

当我给

@addit

一个类似于：

.box shadow（0,0,2px，#1361aa，inset）

的值时，它可以正常工作，但为什么如果@addit的参数没有填充，那么它就不能工作呢？如何修复它

帮助，感谢您的帮助。

您不能使用

'

，因为它将向box shadow添加无效参数。这是为

.box shadow（2px，2px，5px，#F00）生成的输出

如您所见，较少的CSS支持字符串和空字符串作为参数，但是，CSS不识别这一点，并将其作为无效样式丢弃

一种方法是简单地使用两个名称相同但参数数量不同的mixin（类似于重载）：

对此进行了测试，并与以下各项配合使用：

.box-shadow(2px, 2px, 5px, #F00);
.box-shadow(2px, 2px, 5px, #F00, inset);

您不能使用
”
，因为它会将无效参数添加到框阴影中。这是为
.box shadow（2px，2px，5px，#F00）生成的输出

如您所见，较少的CSS支持字符串和空字符串作为参数，但是，CSS不识别这一点，并将其作为无效样式丢弃

一种方法是简单地使用两个名称相同但参数数量不同的mixin（类似于重载）：

对此进行了测试，并与以下各项配合使用：

.box-shadow(2px, 2px, 5px, #F00);
.box-shadow(2px, 2px, 5px, #F00, inset);

将空字符串转义为默认值
您需要将默认值设置为
~'
，以便它是一个转义字符串

更少

.box阴影（@x、@y、@blur、@color、@addit:~''）{
-网络工具包盒阴影：@x@y@blur@color@addit；
-莫兹盒阴影：@x@y@blur@color@addit；
盒影：@x@y@blur@color@addit；
}
.测试{
.box阴影（0,0,2px，#1361aa）
}

CSS

.test{
-网络工具包盒阴影：0 0 2px#1361aa；
-莫兹盒阴影：0 0 2px#1361aa；
盒影：0 0 2px#1361aa；
}
将空字符串转义为默认值
您需要将默认值设置为
~'
，以便它是一个转义字符串

更少

.box阴影（@x、@y、@blur、@color、@addit:~''）{
-网络工具包盒阴影：@x@y@blur@color@addit；
-莫兹盒阴影：@x@y@blur@color@addit；
盒影：@x@y@blur@color@addit；
}
.测试{
.box阴影（0,0,2px，#1361aa）
}

CSS

.test{
-网络工具包盒阴影：0 0 2px#1361aa；
-莫兹盒阴影：0 0 2px#1361aa；
盒影：0 0 2px#1361aa；
}
那么我应该用什么呢？那么我应该用什么呢？
.box-shadow(2px, 2px, 5px, #F00);
.box-shadow(2px, 2px, 5px, #F00, inset);