我试图添加一个选项,以改变网站的颜色。所以,我有一个颜色字段,这是很好的工作,但问题是,我需要改变颜色10%更深,当鼠标悬停。函数暗表示第一个参数必须是颜色。
Error: argument `$color` of `darken($color, $amount)` must be a color
我的代码如下:
:root {
--main-colour: #f06d06;
}
$colour-primary: var(--main-colour);
.btn {
background-color: $colour-primary;
&:hover {
background-color: darken($colour-primary, 10%);
}
}
我需要可变的主颜色,因为这将被用来实时改变颜色。
有什么想法吗?
非常感谢
发布于 2018-05-30 11:43:32
var(--main-colour)
是一个在运行时内插的CSS函数(因此它将在编译SCSS后解析)。SCSS是编译的,因此它的所有功能都是在运行之前计算的,不改变运行时.
代码中的问题之所以出现,是因为darken
函数需要一个有效的颜色来执行计算,而且在编译期间,它得到的只是var(--main-colour)
而不是颜色本身。(darken
是一个SCSS函数,而不是一个CSS函数,因此不能更改它的运行时)。
发布于 2018-11-01 11:15:59
这个问题来自于靴带。
如果您使用的是一个框架(如function或angular ),请记住在变量之前导入函数。
@import 'functions';
@import 'variables';
发布于 2020-04-26 06:10:32
已经回答了,不可能。然而,在某些情况下,filter: brightness(90%);
可能是一种解决办法。有关CSS过滤器这里的更多信息。
https://stackoverflow.com/questions/50612062
复制相似问题