PostCSS 相对颜色语法

npm install @csstools/postcss-relative-color-syntax --save-dev

PostCSS 相对颜色语法 使用 CSS 颜色函数中的相对颜色语法 CSS 颜色模块 5。 。 。 .

.example {
    background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}

/* becomes */

.example {
    background: rgb(12, 100, 100);
}

[注] 我们无法积极地解决 var() 参数在相对颜色语法中,只有静态值才能工作.

使用量

添加 PostCSS 相对颜色语法 对您的项目:

npm install postcss @csstools/postcss-relative-color-syntax --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');

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

选项

保护

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

postcssRelativeColorSyntax({ preserve: true })

.example {
    background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}

/* becomes */

.example {
    background: rgb(12, 100, 100);
    background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}