1

我有这样的lesscss mixinbox-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 的参数没有填充，那么它就不起作用？以及如何解决？

帮助，谢谢提前。

4

2 回答 2

9

将空字符串转义为默认值

您需要将默认值设置~''为转义字符串。

较少的

.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;
}

.test{
   .box-shadow(0, 0, 2px, #1361aa)
}

CSS

.test {
  -webkit-box-shadow: 0 0 2px #1361aa ;
  -moz-box-shadow: 0 0 2px #1361aa ;
  box-shadow: 0 0 2px #1361aa ;
}
于 2013-07-22T12:30:46.467 回答
2

您不能使用''，因为它会向 box-shadow 添加无效参数。这是生成的输出.box-shadow(2px, 2px, 5px, #F00);

#myDiv {
  -webkit-box-shadow:2px 2px 5px #ff0000 '';
  -moz-box-shadow:2px 2px 5px #ff0000 '';
  box-shadow:2px 2px 5px #ff0000 '';
}

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

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

.box-shadow(@x, @y, @blur, @color) {
    -webkit-box-shadow: @x @y @blur @color;
    -moz-box-shadow: @x @y @blur @color;
    box-shadow: @x @y @blur @color;
}
.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;
}

对此进行了测试并适用于以下内容：

.box-shadow(2px, 2px, 5px, #F00);
.box-shadow(2px, 2px, 5px, #F00, inset);
于 2013-07-22T04:11:23.290 回答