首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

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

  •  
  •   zzhbbdbbd · 11 天前 · 455 次点击

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

    3 回复  |  直到 2019-10-09 19:34:38 +08:00
        1
    zzhbbdbbd   11 天前
    作为一个前端狗好累
        2
    learnshare   11 天前   ♥ 2
    敲黑板:
    rem/em 只建议用在 font-size/line-height/text-indent/word-spacing 等少数字体相关属性中,不要用在需要精确制定尺寸的属性上。
    vw/vh 只建议用在少数全屏相关的布局中。
    px2rem 更是邪教。

    黑板敲烂!
        3
    zzhbbdbbd   11 天前 via Android
    @learnshare 赞同!所以才需要自定义单位这个说法,不需要污染其他单位
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2354 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 14:42 · PVG 22:42 · LAX 07:42 · JFK 10:42
    ♥ Do have faith in what you're doing.