PostCSS 彩色调 () 函数 
PostCSS 彩色调 () 函数 让您使用 color-mod()
函数在 CSS 中,按照过时的版本 CSS 颜色模块 4级 规格(2016年7月5日).
⚠️ color-mod() 已删除 颜色模块 第4级规格. (中文(简体) )这就是为什么(中文(简体) )
:root {
--brand-red: color-mod(yellow blend(red 50%));
--brand-red-hsl: color-mod(yellow blend(red 50% hsl));
--brand-red-hwb: color-mod(yellow blend(red 50% hwb));
--brand-red-dark: color-mod(red blackness(20%));
}
/* becomes */
:root {
--brand-red: rgb(255, 127.5, 0);
--brand-red-hsl: rgb(255, 127.5, 255);
--brand-red-hwb: rgb(255, 127.5, 0);
--brand-red-dark: rgb(204, 0, 0);
}
/* or, using stringifier(color) { return color.toString() } */
:root {
--brand-red: rgb(100% 50% 0% / 100%);
--brand-red-hsl: hsl(30 100% 50% / 100%);
--brand-red-hwb: hwb(30 0% 0% / 100%);
--brand-red-dark: hwb(0 0% 20% / 100%);
}
支持的颜色
这个 color-mod() 函数接受 rgb(),以逗号分隔 rgb(), (中文(简体) ),
rgba(), (中文(简体) ), hsl(),以逗号分隔 hsl(), (中文(简体) ), hsla(), (中文(简体) ), hwb(),以及
color-mod() 颜色,以及 3, 4, 6和 8 二进制颜色, 并命名
不需要额外插件的颜色.
实施详情见 规格。 。 。 .
支持的色彩调整器
这个 color-mod() 函数接受 red(), (中文(简体) ), green(), (中文(简体) ), blue(), (中文(简体) ), a() 编号 :
alpha(), (中文(简体) ), rgb(), (中文(简体) ), h() 编号 : hue(), (中文(简体) ), s() 编号 : saturation(), (中文(简体) ), l() 编号 :
lightness(), (中文(简体) ), w() 编号 : whiteness(), (中文(简体) ), b() 编号 : blackness(), (中文(简体) ), tint(), (中文(简体) ),
shade(), (中文(简体) ), blend(), (中文(简体) ), blenda(),以及 contrast() 颜色调整器.
实施详情见 规格。 。 。 .
支持的变量
默认, var() 变量如果对应的自定义会被使用
属性存在于 :root 规则,或者如果指定了倒置值.
使用量
添加 PostCSS 彩色调 () 函数 对您的项目:
npm install postcss postcss-color-mod-function --save-dev
使用 PostCSS 彩色调 () 函数 处理您的 CSS :
const postcssColorMod = require('postcss-color-mod-function');
postcssColorMod.process(YOUR_CSS /*, processOptions, pluginOptions */);
或者把它当作一个 邮政 插件 :
const postcss = require('postcss');
const postcssColorMod = require('postcss-color-mod-function');
postcss([
postcssColorMod(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS 彩色调 () 函数 在所有节点环境中运行,并有下列特殊指令:
| 节点 | 后CSS CLI 软件 | 网络软件包 | 创建反应应用 | 古尔普 | 格鲁特 |
|---|
选项
字符串
这个 stringifier 选项定义 CSS 中将如何生成已转换的颜色.
默认的遗产 rgb() 财务报告和审定财务报表 rgba() 颜色产生,但这可能是
易于更新以支持[CSS 颜色模块 第4级颜色]颜色.
import postcssColorMod from 'postcss-color-mod-function';
postcssColorMod({
stringifier(color) {
return color.toString(); // use CSS Color Module Level 4 colors (rgb, hsl, hwb)
}
});
未来的主要排放 PostCSS 彩色调 () 函数 可能扭转 功能,以便默认生成 CSS 色彩模块 第4级颜色.
未解决
这个 unresolved 选项定义未解决的函数和参数应如何
处理。 现有备选方案如下: throw, (中文(简体) ), warn,以及 ignore编辑
默认选项为 throw。 。 。 .
若为 ignore 用于: color-mod() 函数保持不变.
import postcssColorMod from 'postcss-color-mod-function';
postcssColorMod({
unresolved: 'ignore' // ignore unresolved color-mod() functions
});
变换参数
这个 transformVars 选项定义是否 var() 内部使用的变量
color-mod() 应转换为相应的自定义属性
备查 :root,或如果指定其倒数。 默认,
var() 变量将被转换.
然而,由于这些转变发生在建设时,因此不可能是 认为准确。 依赖精确解决串联变量 了解活生生的DOM树.
导入从
这个 importFrom 选项允许您从其他来源导入变量,
可能是CSS,JS,和JSON文件, 直接传递对象.
postcssColorMod({
importFrom: 'path/to/file.css' // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }
});
.brand-faded {
color: color-mod(var(--brand-main) a(50%));
}
/* becomes */
.brand-faded {
color: rgba(0, 0, 255, .5);
}
多个文件可以传递到此选项中,它们将在
他们收到命令 JavaScript 文件、 JSON 文件及对象需要
名称自定义属性 customProperties 或者说
custom-properties 键.
postcssColorMod({
importFrom: [
'path/to/file.css', // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }
'and/then/this.js', // module.exports = { customProperties: { '--brand-dark': 'blue', '--brand-main': 'var(--brand-dark)' } }
'and/then/that.json', // { "custom-properties": { "--brand-dark": "blue", "--brand-main": "var(--brand-dark)" } }
{
customProperties: {
'--brand-dark': 'blue',
'--brand-main': 'var(--brand-dark)'
}
}
]
});
变量可能参考其他变量,此插件将尝试
解决他们。 若为 transformVars 设置为 false 接下来 importFrom 不会
将使用.