Less css编译器。无法使用darken属性 [英] Less css compiler. Unable to use darken property

问题描述

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

我的问题是这样：
使用我当前的代码，使用darken属性，编译结果为：

语法错误：错误评估函数 darken ：Object＃has
没有方法'toHSL'

，代码如下：

  @colors：
008B8B，
00CDCD，
00EEEE 
 
 / *颜色和背景循环（基于colors.less数组）* / 
 .loop-colors（@index）when（@index> 0）{//循环生成每个颜色的规则
 .loop-colors（@index  -  1）; //调用下一个迭代
 @color：e（extract（@colors，@index））; 
 @hexColor：〜'＃@ {color}'; 
 @border：1px solid darken（@hexColor，5％）; 
& .col  -  @ {color} {
 background：@hexColor; 
 border：@border; 
} 
} 
  

我不知道为什么这不好。 / p>

我的意思是，我认为是因为颜色列表在每个颜色之前没有＃，而是因为我在css类上使用它好吧，我不能将它添加到@colors，所以我必须添加它以后。

我不知道如果和为什么添加＃

感谢

解决方案

by @ seven-phases-max，〜'＃@ {color}'不会创建一个颜色，而是一个字符串。要将字符串转换为颜色，可以使用 颜色 功能。

  @colors：
008B8B，
00CDCD，
 00EEEE; 
 
 / *颜色和背景循环（基于colors.less数组）* / 
 .loop-colors（@index）when（@index> 0）{//循环生成每个颜色的规则
 .loop-colors（@index  -  1）; //调用下一个迭代
 @color：e（extract（@colors，@index））; 
 @hexColor：〜'＃@ {color}'; 
 @border：1px solid darken（color（@hexColor），5％）; 
& .col  -  @ {color} {
 background：@hexColor; 
 border：@border; 
} 
} 
  

I'm developing a project using LESS as compiler for my CSS. I have already a fully working loop that sets the background color properly.

My question is this: With my current code, when i try to use darken property, the compiling result is this:

SyntaxError:error evaluating function darken: Object # has no method 'toHSL'

and the code is this one:

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

i have no idea why this is not good.

I mean, i think is because the list of color doesn't have the "#" before every color, but just because i'm using it on the css class as well, i can't add it to @colors, so i have to add it later.

I don't know if and why adding the "#" later will affect the darken property and how.

Thanks

解决方案

As mentioned by @seven-phases-max, ~'#@{color}' will not create a color but a string. To convert a string to a color, you can use color function.

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

这篇关于Less css编译器。无法使用darken属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！