Sass中color.mix方法使用CSS变量时失效报错问题

错误原因 #

Sass是预处理器，编译阶段就会执行mix()函数，但你传入的var(--color1)是CSS变量——这个值只有浏览器在运行时渲染页面才会解析，编译时Sass根本无法获取它对应的具体颜色值，因此mix()函数抛出“不是颜色”的错误。

解决方案 #

方案一：编译时传入确定的颜色值（静态场景） #

如果颜色值在编译阶段就能确定，把CSS变量替换成Sass变量，让mix()能拿到具体颜色进行计算：

修改调用代码：

// 定义Sass变量，编译时可识别
$color1: rgb(255, 255, 255);
$color2: rgb(0, 0, 0);

:root {
  body {
    // 把Sass变量转成CSS变量（可选，保留原有的CSS变量使用方式）
    --color1: #{$color1};
    --color2: #{$color2};

    // 传入Sass变量给混合宏
    @include createGradient('example', $color1, $color2);
  }
}

原混合宏无需修改，编译时Sass会正常计算出渐变步骤对应的颜色，生成目标CSS变量。

方案二：使用CSS原生颜色混合（动态场景） #

如果需要颜色值支持运行时动态修改（比如通过JS调整CSS变量），改用CSS原生的color-mix()函数——它是浏览器运行时执行的，能识别CSS变量。

修改混合宏：

@mixin createGradient($prefix, $startColor, $endColor, $steps: 20) {
  $stepSize: 1000 / $steps;
  $stepPercentage: $stepSize / 1000;
  $stepsLoop: $steps - 1;

  @for $i from 1 through $stepsLoop {
    // 计算color-mix需要的百分比参数
    $mixPercentage: (1 - ($stepPercentage * $i)) * 100%;
    // 使用CSS原生color-mix生成颜色
    --#{$prefix}-color-step-#{$stepSize * $i}: color-mix(in srgb, #{$startColor}, #{$endColor} #{$mixPercentage});
  }
}

调用方式不变，直接传入CSS变量即可：

:root {
  body {
    --color1: rgb(255, 255, 255);
    --color2: rgb(0, 0, 0);

    @include createGradient('example', var(--color1), var(--color2));
  }
}

注意：color-mix需指定颜色空间（示例用in srgb），现代浏览器均支持该特性，若需兼容旧版浏览器，建议优先选择方案一。

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