Question

我正在尝试添加一个更改网站颜色的选项。所以，我有一个工作正常的色域但问题是我需要在鼠标悬停时将颜色更改为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%);
    }
}

我需要变量--main-color，因为这将用于实时更改颜色。

有什么想法吗？

非常感谢

Answer 1

var(--main-colour)是一个在运行时插补的CSS函数（所以它将在编译SCSS之后解析）。编译SCSS，因此它的所有函数都在之前计算并且不会改变运行时。

代码中的问题发生是因为darken函数需要有效的颜色才能执行计算，并且在编译期间，它获取的所有内容都是var(--main-colour)而不是颜色本身。（darken是一个SCSS函数，而不是CSS函数，因此无法在运行时更改。）

Answer 2

该问题来自Bootstrap。

如果您正在使用React或angular这样的框架，请记住在变量之前导入函数。

@import 'functions';
@import 'variables';

Answer 3

已经回答，不可能。但是，在某些情况下，filter: brightness(90%);可能是一种解决方法。有关CSS过滤器here的更多信息。

Answer 4

您需要导入3个文件

@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins";

Answer 5

在新版本中，您必须导入引导程序变量。如果仍然错误检查文件补丁，它在导入引导变量后解决，我没有导入引导变量，... @import "~bootstrap/scss/functions"; @import '~bootstrap/scss/variables';

使用css主题的函数变暗 - 错误：参数`$ color`的`darken（$ color，$ amount）`必须是一种颜色

5 个答案: