PostCSS 颜色混合变量函数参数

npm install @csstools/postcss-color-mix-variadic-function-arguments --save-dev

PostCSS 颜色混合变量函数参数 让你使用 color-mix() 函数,在 CSS 颜色 5 规格。 。 。 .

.red {
    color: color-mix(in srgb, red);
}

.grey {
    color: color-mix(in srgb, red, lime, blue);
}

/* becomes */

.red {
    color: rgb(255, 0, 0);
}

.grey {
    color: rgb(85, 85, 85);
}

[注] 我们无法积极地解决 var() 参数 color-mix(),只有静态值才会起作用.

使用量

添加 PostCSS 颜色混合变量函数参数 对您的项目:

npm install postcss @csstools/postcss-color-mix-variadic-function-arguments --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssColorMixVariadicFunctionArguments = require('@csstools/postcss-color-mix-variadic-function-arguments');

postcss([
    postcssColorMixVariadicFunctionArguments(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssColorMixVariadicFunctionArguments({ preserve: true })

.red {
    color: color-mix(in srgb, red);
}

.grey {
    color: color-mix(in srgb, red, lime, blue);
}

/* becomes */

.red {
    color: rgb(255, 0, 0);
    color: color-mix(in srgb, red);
}

.grey {
    color: rgb(85, 85, 85);
    color: color-mix(in srgb, red, lime, blue);
}