较少css mixin参数A默认为参数B

Question

我目前正在使用LESS CSS，并试图创建一个mixin，模仿默认的速记参数的css行为。

在CSS你经常声明即

margin: 5px 5px 10px; 

而且它读作

margin: 5px 5px 10px 5px; 

我试着用边界半径混入

.border-radius (@topright: 5px, @bottomright: @topright, @bottomleft: @topright, @topleft: @bottomright) {} 

我希望它采取同样的如果仅用一个参数调用，则第一个作为所有缺省值。如果我用2参数调用它，它应该将第一个默认值设为第三个，将第二个默认值设为第四个。

有没有一种方法可以单独使用LESS来实现这种行为？

Answer 1

正确的方式做，这是只接收一个参数

.border-radius(@px) { 
    -webkit-border-radius: @px; 
    -moz-border-radius: @px; 
    border-radius: @px; 
} 

然后，你可以用一个参数调用它：

.border-radius(5px); 

或许多。这需要你要么把它们放到一个变量，或逃避他们：

@myradius: 5px 5px 10px; 
.border-radius(@myradius); 

或

.border-radius(~"5px 5px 10px"); 

我read的Bootstrap project使用为简洁的后一个版本。