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

如何使用less js中的变量作为出现在括号前的命令?,less,Less,如何使用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%); } 我想将变暗(改为@breadcrumbcolouraction(),因此该

如何使用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%); }
我想将
变暗(
改为
@breadcrumbcolouraction(
),因此该命令是基于变量选择的(因此它可以根据值或变量变亮或变暗)。我如何做到这一点

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

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

Sitepoint论坛上有人给了我答案


我会说不。在调用函数时,不能使用变量来替换函数名。但是,可以定义一个变量来保存函数本身,然后根据其他变量的值使用适当的变量。也可以在分离的规则集中定义变暗/变亮函数,然后应用他在其他变量值上设置了规则集(如果您想同时使用一整套规则,这将非常有用)

虽然上面的代码看起来可能不像您想要的那么直接,但您可以看到,通过使用变量、包含用作选项的值的变量、保护子句和分离集,您可以基于其他地方变量的值应用变量属性。如果我们将@some option更改为类似“lighte”的内容我们可以为.box定义另一个guard子句定义,它可以应用一整套其他定义

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

我在less js文档1中找不到when命令,正如在正在定义和解释它的功能中一样。我在哪里可以找到它? 谢谢你的帮助

这是因为该链接指向functions部分。我说的是guard子句,而不是function…:)

@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();
}