Question

我正在开发一个使用LESS作为我的CSS编译器的项目。我已经有一个完全正常工作的循环，可以正确设置背景颜色。

我的问题是：使用我当前的代码，当我尝试使用变暗属性时，编译结果如下：

SyntaxError：错误评估函数darken：Object＃has 没有方法＆＃39; toHSL＆＃39;

代码就是这个：

@colors:
"008B8B",
"00CDCD",
"00EEEE";

/* Colors and background loop (based on colors.less arrays) */
.loop-colors(@index) when (@index > 0){ // loop to generate rules for each color
  .loop-colors(@index - 1);// call for the next iteration
  @color: e(extract(@colors, @index));
  @hexColor:  ~'#@{color}';
  @border: 1px solid darken(@hexColor, 5%);
  &.col-@{color}{
    background: @hexColor;
    border:@border;
  }
}

我不知道为什么这不好。

我的意思是，我认为是因为颜色列表没有＆＃34;＃＆＃34;在每种颜色之前，只是因为我也在css类中使用它，我不能将它添加到@colors，所以我必须稍后添加它。

我不知道是否以及为何添加＆＃34;＃＆＃34;以后会影响变暗的属性以及如何。

由于

Answer 1

如@ seven-phases-max所述，~'#@{color}'不会创建颜色而是字符串。要将字符串转换为颜色，可以使用color函数。

@colors:
  "008B8B",
  "00CDCD",
  "00EEEE";

/* Colors and background loop (based on colors.less arrays) */
.loop-colors(@index) when (@index > 0) { // loop to generate rules for each color
  .loop-colors(@index - 1);// call for the next iteration
  @color: e(extract(@colors, @index));
  @hexColor:  ~'#@{color}';
  @border: 1px solid darken(color(@hexColor), 5%);
  &.col-@{color} {
    background: @hexColor;
    border: @border;
  }
}

减去css编译器。无法使用变暗的属性

1 个答案: