使用 LESS，是否可以扩展参数混合？

Question

我是 LESS 的新手，我只是在尝试使用 1.5 版。我发现了有用的extend 命令，但我想知道它是否可以应用于参数混合以及静态混合。显然，根据我的实验，这似乎是不可能的：

这行得通

.some-mixin {

}

.child {
  &:extend(.some-mixin);
}

这不起作用并引发“意外令牌”错误：

.some-mixin(@color, @bgcolor) {
  color: @color;
  background-color: @bgcolor;
}

.child1 {
  &:extend(.some-mixin(red, blue));
  border: 1px solid blue;
}

.child2 {
  &:extend(.some-mixin(red, blue));
  border: 1px solid green;
}

.child3 {
  &:extend(.some-mixin(red, blue));
  border: 1px solid red;
}

这是 LESS 的当前限制，还是我使用不正确？提前感谢您的回答。

编辑 - 根据请求添加预期输出

当有更多的孩子扩展参数混合时，我的期望会更有意义：

.child1,
.child2,
.child3 {
  color: red;
  background-color: blue;
}

.child1 {
  border: 1px solid blue;
}

.child2 {
  border: 1px solid green;
}

.child3 {
  border: 1px solid red;
}

Answer 1

我不确定您想要实现什么（也就是说，如果 :extend() 代码扩展了参数 mixin，我不确定您期望它实际做什么）。如果您希望定义 .child 的颜色，那么将其用作直接的 mixin 即可：

少

.some-mixin(@color, @bgcolor) {
  color: @color;
  background-color: @bgcolor;
}

.child {
 .some-mixin(red, blue);
}

CSS 输出

.child {
  color: #ff0000;
  background-color: #0000ff;
}

这也使 .child 本身成为 red 和 blue 颜色组合的混合，我认为如果它有效，这将是扩展工作的最终结果。是，我希望你的第二组代码产生这样的东西（理论上；这实际上不起作用，也不是在 LESS 中实际产生的）：

.some-mixin(@color, @bgcolor),
.child(@color: red, @bgcolor: blue) {
  color: @color;
  background-color: @bgcolor;
}

但是这两个几乎等同于 mixins（一个有添加的参数）：

/* theoretical mixin if extension worked */
.child(@color: red, @bgcolor: blue) {
  color: @color;
  background-color: @bgcolor;
}
/* code from straight use of .some-mixin in .child */
.child {
  color: #ff0000;
  background-color: #0000ff;
}

这样使用上面的任何一个都会得到将子值混合到新选择器的结果：

少

.test {
  .child; /* or using .child(); */
}

CSS 输出

.test {
  color: #ff0000;
  background-color: #0000ff;
}

Answer 2

不，目前不支持此功能。但计划在未来的版本中实现。