前文
很多时候我们很想要一个能够自定义 CSS 单位的东西，比如下面这种情况
UI 妹子给的图总是 px 单位的，但是我们做移动端的时候很多时候是想要 rem 的，这时候我们会手动计算从 px 到 rem。
假如你计算的是 rem = px / 100，通常情况下，可能我们每次都需要从 UI 稿除以 100 写在代码里面。比如UI 稿给的是 1.5px 那我们需要在代码里写上0.015rem。
现有的插件
这样十分的不优雅。但是现在到处都是一些单位换算工具，比如 vscode 就有一些单位换算工具，它能够在你编辑代码的时候约束你，帮你自动计算，它依赖于 VSCode 的 language service，缺点很明显了，一旦你脱离了 VSCode，啥也没了。
除此之外，现在还有很多类似 px 2 rem，rem 2 vw 等等这样的插件，这种插件存在的问题是，存在单位的限制，它只能从 xx 到 xx 的转换，第二个严重的问题是存在对原有单位的污染，如果使用了 px 2 rem ，那么你的整个应用中都不能使用 px 了，因为 px 都会被转成 rem，这样的问题是很大的，很多时候用户会使用 平板 来访问你的应用，如果整个应用都是 rem，那好了，多大的平板就有多大的字，这是不对的，用户用更大的移动设备是想看到更多的内容而不是更大的字，因此多单位共存是很重要的。
Postcss-Relaxed-Unit
这是今天的主角了。它的作用很单纯，就是自定义单位到目标单位的计算输出。
e.g.
postcss: {
plugins: {
'postcss-relaxed-unit': {
rules: { px: 'div(100).unit(rem)' },
},
},
},
上面这段配置表示整个项目中的 px 都等于当前值除以 100 过后的 rem，但是上面说过了不要做单位污染，因此，很多时候我们都是自己声明一个新的单位。
比如我们要一个新的单位名字叫 rx，我想让它等于 100px + 20px 的值，那么我们只需要这样配置
postcss: {
plugins: {
'postcss-relaxed-unit': {
rules: { rx: 'div(100).add(20).unit(px)' },
},
},
},
原 CSS
.hello {
height: 100rx;
}
转换后
.hello {
height: 21px; /** 100 / 100 + 20 */
}
div，add，unit 都是 relaxed-unit 提供的操作符，除此之外还有其他的操作符，详细看 这里。
div 表示除以，add 表示相加运算，unit是最终输出的方法，如果不使用 unit 那么它将按原单位输出。
多单位的配置
可能发现了 relaxed-unit 的 rules 是个对象，因此可以传递多个单位映射关系
postcss: {
plugins: {
'postcss-relaxed-unit': {
rules: {
rx: 'div(100).add(20).unit(px)',
ex: 'add(10).sub(20).mul(30).unit(rem)'
},
},
},
},
原 CSS
.hello {
height: 100rx;
width: 20ex;
}
转换后
.hello {
height: 21px;
width: 300rem;
}
文档
更多的文档说明看 Github
https://github.com/youncccat/postcss-relaxed-unit
