简而言之:不,目前这是不可能的(变量总是作为一个 mixin 参数)。 (“参数列表扩展”功能实际上已经实现,可能会出现在 Less 2.0 中,但它需要一些支持,请参阅 #1857 - 不要犹豫到 +1 那里)。
解决方法:
1
您可以通过 mixin 特化创建“智能参数处理”(请参阅 Pattern Matching)。
例如。 (小于 1.6+):
.border-radius(@tr: 0, @br: 0, @bl: 0, @tl: 0) when (default()) {
border-top-right-radius: @tr;
border-bottom-right-radius: @br;
border-bottom-left-radius: @bl;
border-top-left-radius: @tl;
}
.border-radius(@values) when (length(@values) = 4) {
.border-radius(
extract(@values, 1),
extract(@values, 2),
extract(@values, 3),
extract(@values, 4));
}
// you also have to provide specializations for
// (length(@values) = 2) and (length(@values) = 3)
// cases if you need to handle them
// ...............................................
// usage:
@myRadius: 3px, 0, 0, 3px;
a {
.border-radius(1px, 2px);
}
b {
.border-radius(@myRadius);
}
2
和上面一样,只是稍微不那么冗长的变体(Less 1.5+):
.border-radius(@values...) {
.-() {@tr: 0; @br: 0; @bl: 0; @tl: 0} .-();
.-() when (length(@values) > 0) {@tr: extract(@values, 1)}
.-() when (length(@values) > 1) {@br: extract(@values, 2)}
.-() when (length(@values) > 2) {@bl: extract(@values, 3)}
.-() when (length(@values) > 3) {@tl: extract(@values, 4)}
border-top-right-radius: @tr;
border-bottom-right-radius: @br;
border-bottom-left-radius: @bl;
border-top-left-radius: @tl;
}
// ...............................................
// usage:
@myRadius: 3px, 0, 0, 3px;
a {.border-radius(1)}
b {.border-radius(1, 2)}
c {.border-radius(1, 2, 3)}
d {.border-radius(1, 2, 3, 4)}
e {.border-radius(1 2 3 4)}
f {.border-radius(@myRadius)}
// etc.
3
不是一种解决方法,而是“以防万一”备注,如果用例仅限于基本 CSS 属性,如果您真的需要默认值是 0 而不是实际的 CSS,这实际上是有问题的”默认值”(即为什么我们需要将.border-radius(1, 2) 扩展为border-radius: 1 2 0 0; 而不是border-radius: 1 2;?)。相反,我希望混合遵循 CSS 语法,这样就可以很简单:
.border-radius(@values...) {
// ...
border-radius: @values;
}
// ...............................................
// usage:
@myRadius: 3px 0 0 3px; // no commas here
a {.border-radius(1)}
b {.border-radius(1, 2)}
c {.border-radius(1, 2, 3)}
d {.border-radius(1, 2, 3, 4)}
e {.border-radius(1 2 3 4)}
f {.border-radius(@myRadius)}
附:和我一样:如果你对这类东西的用例仅限于供应商前缀,请考虑在你的构建链中添加一个自动前缀工具,以停止浪费你的时间来编写这些供应商化预处理器 mixin (see also)。