css - less css mixin 参数 A 作为参数 B 的默认值

Question

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

在 CSS 中你经常声明 ie

margin: 5px 5px 10px;

它被读作

margin: 5px 5px 10px 5px;

我用边界半径混合器尝试了同样的方法

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

如果仅使用一个参数调用，我希望它将第一个作为默认值。如果我用 2 个参数调用它，它应该将第一个作为第三个的默认值，将第二个作为第四个的默认值。

有没有办法单独使用 LESS 来实现这种行为？

score 4 · Accepted Answer

正确的方法是只接收一个参数

.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");

我读到 Bootstrap 项目为了简洁起见使用后一个版本。

1 回答 1