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

Question

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

这行得通

.some-mixin {

}

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

这不起作用并抛出“意外 token ”错误:

.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 的当前限制，还是我使用不正确？预先感谢您的回答。

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

当有更多 child 扩展参数混合时，我期望的更有意义:

.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() 代码在扩展参数混合时实际执行的操作)。如果您的愿望是定义 .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;
}