自定义 CSS 单位的利器

前文

很多时候我们很想要一个能够自定义 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

转载：https://blog.csdn.net/HaoDaWang/article/details/102480021