1

我希望为边界半径创建 LESS 混合，允许在混合声明中由其他两个参数将两个参数设置为默认值。以下是一个示例，它不起作用，但类似于我想要实现的目标：

.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 是不可能的，还是我做错了？

4

2 回答 2

3

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

.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。如果需要，您还可以轻松创建具有三个参数的版本。

于 2012-09-22T07:07:26.607 回答
0

因为您的 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 集合。

于 2012-09-22T06:01:33.977 回答