Question

我在Bundler上使用Less CSS，我在Asp.Net平台上构建。

我有以下代码：

&::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%);

由于以下插值语句，该值被视为String。 e() or the ~"value"函数输出一个String。

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

正如他在评论中指出的七阶段最大值一样，下面的方法也可以避免使用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;
  }  
}

较少的CSS淡入淡出功能不适用于变量

1 个答案: