gpt4 book ai didi

css - 更少的 css 编译器。无法使用变暗属性

转载 作者:行者123 更新时间:2023-11-28 09:10:29 26 4
gpt4 key购买 nike

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

我的问题是:使用我当前的代码,当我尝试使用 darken 属性时,编译结果是这样的:

SyntaxError:error evaluating function darken: Object # has no method '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 ,所以我必须稍后添加它。

我不知道后面添加“#”是否以及为什么会影响 darken 属性以及如何。

谢谢

最佳答案

如@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 - 更少的 css 编译器。无法使用变暗属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26538514/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com