` `darken($color，$amount)`的参数`$color`必须是颜色

Question

$color-button: var(--color-9);
&:hover, &:focus {
  background-color: darken($color-button, 10%);
}

错误：darken($color, $amount)的参数$color必须是不带引导的颜色

Answer 1

当您的代码到达用户的浏览器时，它就是CSS。当SASS正在处理你的代码时，它不知道你传递给它的变量会有什么颜色，所以它不能处理它来使它变暗。

要在运行时实时完成这类工作，您可以使用一些JavaScript来计算出变暗的颜色，或者，如果有一组已知的颜色可能必须变暗，则构建它们的暗色等价物。

这个问题和答案可能对How to create color shades using CSS variables similar to darken() of SASS?很有帮助。基本上，如果你打算自己做处理，在hsl中工作会让生活变得更容易。