css主题化的变暗函数-错误：“变暗（$color，$amount）”的参数“$color”必须是颜色

我试图添加一个选项来改变网站的颜色。因此，我有一个颜色字段，它工作正常，但问题是当鼠标悬停时，我需要将颜色更改为10%深。函数darken表示第一个参数必须是颜色

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%);
    }
}

我需要变量--主颜色，因为它将用于实时更改颜色

有什么想法吗

非常感谢

var（--main color）

是一个CSS函数，在运行时进行插值（因此它将在编译SCS后得到解决）。 SCSS是编译的，因此它的所有函数都是在编译之前计算的，不会更改运行时

---

代码中出现问题的原因是

darken

函数需要一种有效的颜色来执行计算，在编译期间，它得到的只是

var（--main color）

，而不是颜色本身。（

darken

是一个SCSS函数，而不是CSS函数，因此在运行时无法更改）。

该问题来自引导

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

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

---

您需要导入这3个文件

@import.。/node_模块/引导/scss/函数”；
@导入“./node_模块/bootstrap/scss/variables”；
@导入“./node_模块/bootstrap/scs/mixin”
已回答，不可能。但是，在某些情况下，
过滤器：亮度（90%）可能是一种解决方法。更多关于CSS过滤器的信息。
在新版本中，您必须导入引导变量。若仍然错误检查文件补丁，它解决了导入引导变量后，我并没有导入引导变量，。。。
@导入“~bootstrap/scss/functions”；
@导入“~bootstrap/scss/variables”
 我正在尝试复制此示例：。背景色效果很好，唯一的问题是如果我尝试使用深色功能的颜色，那么解决方法是什么？@ValRob遗憾的是，在当前状态下，没有直接的解决方法。如果你需要在CSS中变暗一种颜色，你需要的是一种基于JS的解决方案。这是我见过的关于这一点的最简洁的解释，虽然我不喜欢它以这种方式工作，但它是完全有意义的。