Question

我对box-shadow的 lesscss mixin 是这样的：

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

帮助，谢谢你提前。

Answer 1

将空字符串转义为默认值

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

<强> LESS

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

Answer 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);

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

2 个答案:

将空字符串转义为默认值