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

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

  •  
  •   zzhbbdbbd ·
    mistricky · 2019-10-09 18:17:46 +08:00 · 1509 次点击
    这是一个创建于 1632 天前的主题,其中的信息可能已经有所发展或是发生改变。

    还是那回事,移动端 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
    zzhbbdbbd
        1
    zzhbbdbbd  
    OP
       2019-10-09 18:27:09 +08:00
    作为一个前端狗好累
    learnshare
        2
    learnshare  
       2019-10-09 18:34:59 +08:00   ❤️ 2
    敲黑板:
    rem/em 只建议用在 font-size/line-height/text-indent/word-spacing 等少数字体相关属性中,不要用在需要精确制定尺寸的属性上。
    vw/vh 只建议用在少数全屏相关的布局中。
    px2rem 更是邪教。

    黑板敲烂!
    zzhbbdbbd
        3
    zzhbbdbbd  
    OP
       2019-10-09 19:34:38 +08:00 via Android
    @learnshare 赞同!所以才需要自定义单位这个说法,不需要污染其他单位
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1027 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 19:36 · PVG 03:36 · LAX 12:36 · JFK 15:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.