PostCSS 阿尔法函数

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

PostCSS 阿尔法函数 让你使用 alpha 函数在 支助科,随 CSS 颜色 规格.

.color {
    color: alpha(from #dddd / calc(alpha / 2));
}

:root {
    --a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));
}

/* becomes */

.color {
    color: rgb(from #dddd r g b / calc(alpha / 2));
}

:root {
    --a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));
}

使用量

添加 PostCSS 阿尔法函数 对您的项目:

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

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssAlphaFunction = require('@csstools/postcss-alpha-function');

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

选项

保护

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

postcssAlphaFunction({ preserve: true })

.color {
    color: alpha(from #dddd / calc(alpha / 2));
}

:root {
    --a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));
}

/* becomes */

.color {
    color: rgb(from #dddd r g b / calc(alpha / 2));
    color: alpha(from #dddd / calc(alpha / 2));
}

:root {
    --a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));
}

@supports (color: alpha(from red / 1)) and (color: rgb(0 0 0 / 0)) {
:root {
    --a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));
}
}

启用渐进自定义收益

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

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

postcssAlphaFunction({ enableProgressiveCustomProperties: false })

.color {
    color: alpha(from #dddd / calc(alpha / 2));
}

:root {
    --a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));
}

/* becomes */

.color {
    color: rgb(from #dddd r g b / calc(alpha / 2));
    color: alpha(from #dddd / calc(alpha / 2));
}

:root {
    --a-color: rgb(from rgb(2 1 0 / var(--a)) r g b / calc(alpha / 2));
    --a-color: alpha(from rgb(2 1 0 / var(--a)) / calc(alpha / 2));
}

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

版权:颜色转换

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