Mac环境下dart-sass的mix()输出rgb而非HEX的配置疑问

问题场景 #

在Mac系统中使用gulp@5.0.0与gulp-sass@6.0.0时，使用Sass的color.mix()混合颜色后，编译结果输出带小数的RGB格式，而非期望的HEX格式。

当前Gulp任务代码 #

import { src, dest, series, watch } from 'gulp';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';

const sass = gulpSass(dartSass);

const sassTask = (done) => {
  src([ "src/sass/**/*.scss"])
    .pipe(
        sass().on('error', sass.logError)
    )
    .pipe(dest('css'))
    .on('end', done);
};

const watchTask = (done) => {
  watch("src/sass/**/*.scss", series(sassTask))
    .on('end', done);
};

export { sassTask, watchTask };

export default watchTask;

示例SCSS代码 #

@use "sass:color";

$color_brown: #58504c;

p {
  color: color.mix($color_brown, #fff, 50%);
}

当前编译结果 #

p {
  color: rgb(104.7, 97.5, 93.9);
}

期望编译结果 #

p {
  color: #69625e;
}

配置调整方案 #

需要在sass()编译调用中添加颜色格式配置，强制dart-sass输出HEX格式的颜色值，同时可指定输出风格保持代码结构一致：

修改后的Gulp任务代码：

import { src, dest, series, watch } from 'gulp';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';

const sass = gulpSass(dartSass);

const sassTask = (done) => {
  src([ "src/sass/**/*.scss"])
    .pipe(
        sass({
          // 指定CSS输出风格，与期望结果的格式匹配
          outputStyle: 'expanded',
          // 强制颜色输出为HEX格式
          color: {
            format: 'hex'
          }
        }).on('error', sass.logError)
    )
    .pipe(dest('css'))
    .on('end', done);
};

const watchTask = (done) => {
  watch("src/sass/**/*.scss", series(sassTask))
    .on('end', done);
};

export { sassTask, watchTask };

export default watchTask;

调整说明 #

• color.format: 'hex'：强制dart-sass将计算后的颜色值输出为HEX格式，替代默认的RGB输出
• outputStyle: 'expanded'：保持编译后的CSS代码结构与你期望的一致（如果需要压缩格式可改为compressed）

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