Nuxt项目中使用SASS相对颜色语法报错，求解决方法

云上老周

2026-8-7

解决SASS报错：Only 3 elements allowed, but 5 were passed

你遇到的问题是因为旧版SASS不支持CSS的相对颜色语法，它会把rgb(from var(--color) r g b / .5)错误识别为给SASS内置rgb()函数传递了5个参数，从而抛出错误。下面是几种可行的解决办法：

升级SASS版本
dart-sass从1.54.0版本开始原生支持CSS相对颜色语法，直接把你的SASS依赖升级到这个版本及以上，原代码就能正常运行，不需要做任何修改。
强制输出原生CSS代码
如果暂时没法升级版本，可以用SASS的插值语法跳过函数解析，让编译器直接输出原生CSS：
```
background-color: #{rgb(from var(--color) r g b / .5)};
```
或者用unquote函数实现同样的效果：
```
background-color: unquote('rgb(from var(--color) r g b / .5)');
```
用SASS颜色函数手动实现
要是上面两种方法都不适用，还可以用SASS的颜色工具函数提取通道值再设置透明度：
```
@use "sass:color";

background-color: rgba(color.red(var(--color)), color.green(var(--color)), color.blue(var(--color)), 0.5);
```
注意：这种方式要求--color是SASS能解析的静态颜色值（比如#ff4444、rgb(255,68,68)），如果是运行时动态修改的CSS变量，这个方法可能失效。