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

[zzhbbdbbd]

还是那回事，移动端 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

[zzhbbdbbd]

作为一个前端狗好累

[learnshare]

敲黑板：
rem/em 只建议用在 font-size/line-height/text-indent/word-spacing 等少数字体相关属性中，不要用在需要精确制定尺寸的属性上。
vw/vh 只建议用在少数全屏相关的布局中。
px2rem 更是邪教。

黑板敲烂！

[zzhbbdbbd]

@learnshare 赞同！所以才需要自定义单位这个说法，不需要污染其他单位