css - CSS 主题的变暗函数 - 错误 : argument `$color` of `darken($color, $amount)` must be a color

Question

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

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

有什么想法吗？

非常感谢

Answer 1

var(--main-colour) 是一个在运行时插值的 CSS 函数(因此它将在 SCSS 编译后解析)。SCSS是编译过的，因此它的所有函数都是在运行时计算好的，不会改变运行时。

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