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

Question

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

帮助,谢谢你提前.

Answer 1

将空字符串转义为默认值

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

减

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