我正在开发一个项目,使用 LESS 作为我的 CSS 编译器。
我已经有一个完全工作的循环,可以正确设置背景颜色。
我的问题是这样的:
使用我当前的代码,当我尝试使用 darken 属性时,编译结果是这样的:
SyntaxError:错误评估函数darken
: 对象#有
没有方法“toHSL”
代码是这样的:
@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;
}
}
我不知道为什么这不好。
我的意思是,我认为是因为颜色列表在每种颜色之前没有“#”,但仅仅因为我也在 css 类上使用它,我无法将它添加到@colors,所以我必须稍后添加。
我不知道稍后添加“#”是否以及为什么会影响变暗属性以及如何影响。
Thanks
正如@seven-phases-max提到的,~'#@{color}'
不会创建颜色而是创建字符串。要将字符串转换为颜色,您可以使用color http://lesscss.org/functions/#misc-functions-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;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)