css - 更少的 css 混合参数 A 作为参数 B 的默认值

Question

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

在 css 中你经常声明即

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为简洁起见，使用后一个版本。