使CSS主题变暗的功能-错误：`darken（$color，$amount）`的参数`$color`必须是颜色

我正在尝试添加一个选项来更改网站的颜色。因此，我有一个能正常工作的色域，但问题是，当鼠标悬停时，我需要将颜色更改为深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-colour，因为它将用于实时更改颜色。

有任何想法吗？

非常感谢

var(--main-colour)是在运行时内插的CSS函数（因此将在编译SCSS之后解决）。SCSS已编译，因此其所有功能都是在运行前计算的，并且不会更改运行时。

代码中出现问题的原因是，darken函数需要使用有效的颜色来执行计算，并且在编译期间，它所获得的只是var(--main-colour)颜色而不是颜色本身。（darken是SCSS函数，而不是CSS函数，因此无法在运行时更改它）。