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/，这是一系列预先构建的mixins。

mixin参数中的变量使用率较低

2 个答案: