CSS主题开发darken函数报错：$color参数必须为颜色值

这个报错的核心原因很明确：Sass的darken()是编译时函数，它需要在编译阶段就拿到具体的颜色值才能计算，但你用的var(--main-colour)是CSS自定义属性（也就是变量），这个值是在浏览器运行时才会被解析的，Sass在编译根本识别不了它是一个合法的颜色，所以就抛出了argument $color of darken($color, $amount) must be a color的错误。

而且因为你需要保留--main-colour来实现实时颜色切换，所以不能把它换成Sass变量（那样编译后就固定值了，没法实时改）。下面给你几个完美适配需求的解决方案：

方案1：用CSS原生color-mix()函数（推荐） #

这是最简单直接的方法，color-mix()是CSS原生支持的函数，能在浏览器运行时处理颜色，完全兼容实时切换需求：

:root { --main-colour: #f06d06; }
.btn {
  background-color: var(--main-colour);
  &:hover {
    // 混合主色和黑色，黑色占比10%，等效于加深10%
    background-color: color-mix(in srgb, var(--main-colour), black 10%);
  }
}

当你实时修改--main-colour的值时，hover状态的加深颜色会自动跟着更新，完全不需要重新编译Sass。

方案2：拆分HSL变量控制亮度 #

如果需要更精细的颜色控制，可以把主颜色拆成HSL的三个分量，这样hover时直接通过calc()降低亮度值：

:root {
  --main-hue: 24;          // 对应#f06d06的色相
  --main-saturation: 90%;  // 饱和度
  --main-lightness: 50%;   // 亮度
  --main-colour: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
}
.btn {
  background-color: var(--main-colour);
  &:hover {
    // 亮度降低10%，实现加深效果
    background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--main-lightness) - 10%));
  }
}

这种方式的好处是可以单独调整色相、饱和度、亮度，实时切换颜色时只需要修改HSL三个变量即可，hover效果也会同步更新。

方案3：封装Sass混合宏复用逻辑 #

如果项目里很多元素都需要这个hover加深的效果，可以封装一个Sass混合宏，方便复用：

@mixin darken-on-hover($var-name) {
  &:hover {
    background-color: color-mix(in srgb, var(#{$var-name}), black 10%);
  }
}

:root { --main-colour: #f06d06; }
.btn {
  background-color: var(--main-colour);
  @include darken-on-hover(--main-colour);
}

这样后续其他需要hover加深的元素，只需要引入这个混合宏并传入对应的CSS变量名就行，代码更简洁，同样支持实时颜色切换。

总结一下：因为你的核心需求是实时切换颜色，所以必须放弃依赖Sass编译时的颜色函数，改用CSS运行时能处理的方案，上面的三种方法都能完美满足你的需求，优先推荐方案1，实现成本最低。

内容的提问来源于stack exchange，提问作者Alejandro