较小的css mixin与参数A作为参数B的默认值

Question

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

在css中你经常声明ie

margin: 5px 5px 10px;

，它被读作

margin: 5px 5px 10px 5px;

我尝试使用border-radius mixin

.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使用后一版本是为了简洁。