less - 如何使用less js中的变量作为出现在括号前的命令？

Question

如何在less js中使用变量作为出现在(括号或括号之前的命令？

.breadcrumb li:nth-child(2) a       { background:  darken(@breadcrumbrootback, 5%); }
.breadcrumb li:nth-child(2) a:after { border-left-color:  darken(@breadcrumbrootback, 5%); }

我想更改darken(为@breadcrumbcolouraction(根据变量选择命令（因此它可以根据值或变量变亮或变暗）。我该怎么做呢？

@breadcrumbcolouraction: "darken";
@breadcrumbcolouraction: "lighten";

在较少的版本中4.1.1，如果我更改darken为变量@breadcrumbcolouraction，较少的文件将无法编译。

标签： less

Answer 1

Sitepoint论坛上有人给了我答案。

---

我会说不。调用函数时不能使用变量替换函数名。但是，您可以定义一个变量来保存函数本身，然后根据其他变量的值使用适当的变量。您还可以在分离规则集中定义变暗/变亮函数，然后将规则集应用于其他变量值（如果您想一次使用一整套规则，这将很有用）。

@redcolor: #FF0000;
@some-option: "darken";

@dark-set: { background: darken(@redcolor, 5%); }

.box {
  width: 100px;
  height: 100px;
}


 // Color box with dark red detached set @dark-set if option is darken
.box when (@some-option = "darken") {
  @dark-set();
}@redcolor: #FF0000;
@some-option: "darken";

@dark-set: { background: darken(@redcolor, 5%); }

.box {
  width: 100px;
  height: 100px;
}


 // Color box with dark red detached set @dark-set if option is darken
.box when (@some-option = "darken") {
  @dark-set();
}

虽然上面的代码可能看起来不像您正在寻找的那样直接，但您可以看到如何通过使用变量、保存用作选项的值的变量、保护子句和分离集，您可以根据其他地方的变量值。如果我们将@some-option 更改为“lighten”之类的东西，我们可以为 .box 定义另一个保护子句定义，它可以应用一整套定义。

也许您可以看到一种使用所有这些不同机制来实现可行解决方案的方法。

我在 less js 文档 1 中找不到 when 命令，就像在定义的功能和解释它的内容中一样。我在哪里可以找到它？感谢您的帮助！

那是因为该链接指向功能部分。我说的是一个保护子句，而不是一个函数...... :)

http://lesscss.org/features/#css-guards-feature

这是Martyr2的来源。