较少的css混合，参数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使用后一个版本是为了简洁。