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

问题描述

如何在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";

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

解决方法

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

Here's the source by Martyr2.