🍰分享一个自定义 CSS 单位的小插件 :)

还是那回事，移动端 UI 妹子给图是 px 但是前端这边用的是 rem 之前公司是一直人工计算（没错，就是你想的那样），每次除以一个 值 （到 rem 的必要除数），然后在代码里写上计算过后的。知道现在有很多这样帮助计算的东西，包括 VSCode 都有自动计算插件... postcss 也有很多类似 px 2 rem, px 2 vw 之类的插件，但是这样做并不优雅...

原因在于，vscode 自动计算插件局限于 ide （ or 编辑器），px 2 rem，px 2 vw... 类插件局限于单位本身，并且会污染 px ,其实我们只是需要一个单位换算工具啊！

你可以这样做

postcss: {
      plugins: {
        'postcss-relaxed-unit': {
          rules: { px: 'div(100).unit(rem)' },
        },
      },
    },

div(100) 表示除以 100, unit(rem) 表示输出单位为 rem，于是遇到 px 都会被转换为除以 100 的值，单位为 rem，可能你不想污染 px，可能会想到一个新的单位 rx, rw （ whatever ）

postcss: {
      plugins: {
        'postcss-relaxed-unit': {
          rules: { 
            rx: 'div(100).unit(rem)',
            rw: 'add(2).sub(10).mul(3).unit(vw)'
          },
        },
      },
    },

你可以指定多个自定义单位的换算规则（说到底我们到底还是只需要一套换算规则和自定义单位就够了）...

GitHub 源码奉上: https://github.com/youncccat/postcss-relaxed-unit