PostCSS 颜色函数

npm install @csstools/postcss-color-function --save-dev

PostCSS 颜色函数 让你使用 color 函数在 支助科,随 CSS 颜色 规格.

.color {
    color: color(display-p3 0.64331 0.19245 0.16771);
}

:root {
    --a-color: color(srgb 0.64331 0.19245 0.16771);
}

/* becomes */

.color {
    color: rgb(179, 35, 35);
}

:root {
    --a-color: rgb(164, 49, 43);
}

使用量

添加 PostCSS 颜色函数 对您的项目:

npm install postcss @csstools/postcss-color-function --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssColorFunction = require('@csstools/postcss-color-function');

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

选项

保护

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

postcssColorFunction({ preserve: true })

.color {
    color: color(display-p3 0.64331 0.19245 0.16771);
}

:root {
    --a-color: color(srgb 0.64331 0.19245 0.16771);
}

/* becomes */

.color {
    color: rgb(179, 35, 35);
    color: color(display-p3 0.64331 0.19245 0.16771);
}

:root {
    --a-color: rgb(164, 49, 43);
}

@supports (color: color(display-p3 0 0 0%)) {
:root {
    --a-color: color(srgb 0.64331 0.19245 0.16771);
}
}

启用渐进自定义收益

这个 enableProgressiveCustomProperties 选项决定原始标记是否 包裹着 @supports 当使用自定义属性时。 默认情况下, 它被启用 .

[注] 我们只建议在您准备好的时候取消这个 preserve 改为 false 或者你带了自定义属性的修补.
查看插件在其中的用途 读取。 。 。 .

postcssColorFunction({ enableProgressiveCustomProperties: false })

.color {
    color: color(display-p3 0.64331 0.19245 0.16771);
}

:root {
    --a-color: color(srgb 0.64331 0.19245 0.16771);
}

/* becomes */

.color {
    color: rgb(179, 35, 35);
    color: color(display-p3 0.64331 0.19245 0.16771);
}

:root {
    --a-color: rgb(164, 49, 43);
    --a-color: color(srgb 0.64331 0.19245 0.16771);
}

自定义属性不回落到上一个声明

支持的颜色空格

.color-spaces {
    color: color(a98-rgb 0.803 0.484 0.944);
    color: color(display-p3 0.8434 0.509 0.934);
    color: color(prophoto-rgb 0.759 0.493 0.898);
    color: color(rec2020 0.772 0.491 0.920);
    color: color(srgb 0.897 0.488 0.959);
    color: color(srgb-linear 0.783 0.203 0.910);
    color: color(xyz 0.560 0.377 0.904);
    color: color(xyz-d50 0.550 0.375 0.680);
    color: color(xyz-d65 0.560 0.377 0.904);
}

版权:颜色转换

本软件或文件包括复制自或衍生自 https://github.com/w3c/cswg-draps/tree/main/cs-color-4 互联网档案馆的存檔,存档日期2014-12-12. 版权:"2022 W3C" (MIT, ERCIM, Keio, Beihan).