在mixin参数中使用较少

Question

我希望为border-radius创建LESS mixin，允许两个参数在mixin声明中被另外两个参数设置为默认值。 以下是一个示例，它不起作用，但类似于我想要实现的目标：

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: @topleft, @bottomleft: @topright) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

我意识到我可以将所有值设置为0开始。 那不是我追求的。 我希望如果mixin这样使用：

blockquote {
    .border-radius-ext(3px, 5px);
}

mixin将输出：

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 5px;
}

...如果使用mixin，仍然允许覆盖@bottomright和@bottomleft的默认值：

blockquote {
    .border-radius-ext(3px, 5px, 7px, 2px);
}

在那种情况下，输出将是：

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 2px;
}

这是不可能的LESS或我只是做错了吗？

Answer 1

参数的默认值不能是其他参数。 但是你可以使用这种方法：

.border-radius-ext (@topleft, @topright) {
    .border-radius-ext(@topleft, @topright, @topleft, @topright);
}

.border-radius-ext (@topleft, @topright, @bottomright, @bottomleft) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

现在，您可以将此mixin与两个或四个参数一起使用。 如果需要，您还可以轻松创建包含三个参数的版本。

Answer 2

因为你的mixin需要4个变量 - 你需要输入4个变量。 设置默认值只有在你拥有所有变量的默认值并且没有传递任何东西时才会起作用 - 或者（我认为） - 如果你总是将变量放在开头，而默认值放在最后。

在任何情况下，我建议只使用四个变量，可能使用默认值，因为如果另一个开发人员在你的LESS上工作，那就不那么容易混淆了。

这样的事情会很好：

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

.border-radius-ext(3px, 5px, 7px, 2px);

我还建议使用LESS元素， http：//lesselements.com/ ，这是一个很好的预制mixin系列。