更少的CSS淡出函数不工作与变量

Question

我使用Less CSS与捆绑器，这是我建立在一个Asp。网络平台。

我有以下代码:

&::after {
    .ScaleX(0);
    .Transition(0.2s 0.2s);
    background-color: fade(@accentColor, 12%);
    border-radius:0.2rem;
    height:100%;
    top:0;
    z-index:-1;
}

编译失败

如果我像这样改变背景色，它会起作用:

background-color:@accentColor;

我这样设置我的调色板:

.AccentPalette(orange);
.AccentPalette(@palette; @color:500) {
    .Swatch(@palette); 
    @accentColor:~"@{accent@{color}}";
    @accent50:  @50;
    ... and some more
}
.Swatch(orange)
{
    @50: #fff3e0;
    @100:#ffe0b2;
    @200:#ffcc80;
    @300:#ffb74d;
    @400:#ffa726;
    @500:#ff9800;
    @600:#fb8c00;
    @700:#f57c00;
    @800:#ef6c00;
    @900:#e65100;
}

任何想法?

Answer 1

编译失败，因为@accentColor变量似乎包含String而不是Color作为其值。fade()函数只作用于颜色值。

解决方法:使用color()函数将String转换为Color值。

background-color: fade(color(@accentColor), 12%);

---

由于下面的插值语句，该值被认为是字符串。e()或~"value"函数输出String

@accentColor: ~"@{accent@{color}}"; 

---

正如seven-phases-max在他的评论中指出的那样，下面的方法也将避免对color()函数的需要。

.AccentPalette(@palette; @color:500) {
  .Swatch(@palette); 
  @accentColor: "accent@{color}"; /* note the change, we are just concatenating and not evaluating */
  @accent500:  @500;
  &::after {
    background-color: fade(@@accentColor, 12%); /* actual evaluation happens here */
    border-radius:0.2rem;
    height:100%;
    top:0;
    z-index:-1;
  }  
}