Nuxt项目SCSS全局函数返回值作为darken入参报错如何解决

• Sass 内置的darken()是编译阶段执行的函数，仅支持处理 Sass 可识别的静态颜色值（十六进制、rgb/rgba、hsl/hsla 等字面量）。
• 你定义的colors-medium-dark()函数通过插值返回的是var(--colors-neutral-medium-dark, #dbe3f2)这类 CSS 原生变量表达式，属于浏览器运行时才会解析的动态值，Sass 编译阶段无法识别其为合法颜色参数，因此触发报错。

根据你的使用场景二选一即可：

场景1：不需要CSS变量的动态切换能力 #

直接修改Sass函数返回静态颜色值，去掉CSS变量和插值语法：

@function colors-medium-dark() {
  @return #dbe3f2;
}

修改后直接调用即可正常编译：

.icon {
  stroke: darken(colors-medium-dark(), 5%);
}

场景2：需要保留CSS变量的动态切换能力 #

放弃使用Sass的darken()函数，改用浏览器原生支持的颜色处理语法color-mix实现相同的加深效果：

.icon {
  /* 效果等价于把对应颜色加深5% */
  stroke: color-mix(in hsl, var(--colors-neutral-medium-dark), black 5%);
}

也可以提前在全局定义好加深后的CSS变量，组件内直接引用即可，性能更好。

内容的提问来源于stack exchange，提问作者Théo Lavaux