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

【问题标题】：Argument `$color` of `darken($color, $amount)` must be a color`darken($color, $amount)` 的参数 `$color` 必须是颜色
【发布时间】：2021-06-29 21:54:30
【问题描述】：

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

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

【问题讨论】：

$show-primary的值是多少？
我编辑了描述。 $show-primary = $颜色按钮

标签： css sass

【解决方案1】：

当您的代码到达用户的浏览器时，它就是 CSS。在 SASS 处理您的代码时，它不知道您传递给它的变量将具有什么颜色，因此无法对其进行处理以使其变暗。

要在运行时实时进行此类操作，您可以使用一些 JavaScript 来计算变暗的颜色，或者，如果有一组已知的颜色可能必须变暗，则构建它们的深色等效项。

这个 SO 问题和答案可能会有所帮助How to create color shades using CSS variables similar to darken() of SASS?。基本上，如果您要自己进行处理，在 hsl 中工作会让生活更轻松。

【讨论】：