Question

我是LESS的新手，我正在尝试使用1.5版本。我发现了有用的extend命令，但我想知道这是否可以应用于参数mixins和静态mixin。显然，基于我的实验，这似乎不可能：

这有效

.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的当前限制，还是我错误地使用它？提前感谢您的答案。

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

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

.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

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

<强> LESS

.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;
}

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

<强> LESS

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

CSS输出

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

Answer 2

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

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

2 个答案: