广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >postcss插件中怎么自动转换px到rem
  • 350
分享到

postcss插件中怎么自动转换px到rem

2024-04-02 19:04:59 350人浏览 独家记忆
摘要

这篇文章将为大家详细讲解有关postCSS插件中怎么自动转换px到rem,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 post

这篇文章将为大家详细讲解有关postCSS插件中怎么自动转换px到rem,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

postcss 是 css 的 transpiler,它对于 css 就像 babel 对于 js 一样,能够做 css 代码的分析和转换。同时,它也提供了插件机制来做自定义的转换。

postcss 的原理

postcss 是 css 到 css 的转译器,它也和 babel 一样,分为 parse、transfORM、generate 3个阶段。各种转换插件都是工作在 transform 阶段,基于 AST 做分析和转换。

postcss插件中怎么自动转换px到rem

css 的 AST 比 js 的简单多了,主要有这么几种:

atrule:以 @ 开头的规则,比如:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

rule:选择器开头的规则,比如:

ul li {
 padding: 5px;
}

decl:具体的样式,比如:

padding: 5px;

比起 js parser 的那几十种 AST 是不是简单的多?

这些可以通过 astexplorer.net可视化的查看

postcss插件中怎么自动转换px到rem

postcss 插件的写法

postcss 插件是工作在 transform 阶段,处理 ast 节点,插件的形式是这样的:

const plugin = (options = {}) => {
  return {
    postcssPlugin: '插件名字',

    Rule (node) {},
    Declaration (node) {},
    AtRule (node) {}
  }
}

外层函数接受 options,返回一个插件的对象,声明对什么节点做处理的 listener,然后在对应的 listener 里写处理逻辑就行。

还可以这样写:

module.exports = (opts = {}) => {
  return {
    postcssPlugin: '插件名字',
    prepare (result) {
      // 这里可以放一些公共的逻辑
      return {
        Declaration (node) {},
        Rule (node) {},
        AtRule (node) {}
      }
    }
  }
}

在 prepare 里返回各种 listener,这样比起第一种来,好处是可以存放一些公共的逻辑。

然后可以这样来运行插件:

const postcss = require('postcss');

postcss([plugin({
    // options
})]).process('a { font-size: 20px; }').then(result => {
    console.log(result.css);
})

下面我们来写一个简易的 px 自动转 rem 的插件来练练手。

实战案例

需求描述

px 是一个固定的长度单位,而设备视口的尺寸是各种各样的,我们想通过一套样式来适配各种设备的显示,就需要相对的单位,常用的是 rem。

rem 的本质就是等比缩放,相对于 html 元素的 font-size。

比如 html 的 font-size 设置为 100px,那 1rem 就等于 100px,之后的样式如果是 200px 就写为 2rem。

这样我们只需要修改 html 的 font-size 就可以适配各种屏幕宽度的显示,具体的单位会做等比缩放。

我们要根据 html 的 font-size 值来把所有的 px 转换为 rem,一般都是手动来做这件事情的,但比较繁琐,知道了计算方式之后,完全可以用 postcss 插件来自动做。

接下来我们就实现下这个 postcss 插件

代码实现

我们搭一下插件的基本结构,只需要声明对 Declaration 处理的 listener:

const plugin = (options) => {
    return {
        postcssPlugin: 'postcss-simple-px2rem',
        Declaration (decl) {
           
        }
    }
}

然后要做的就是把 decl 的样式值中的 px 转换为 rem,简单的正则替换就行:

const plugin = (options) => {
    const pxReg = /(\d+)px/ig;
    return {
        postcssPlugin: 'postcss-simple-px2rem',
        Declaration (decl) {
            decl.value = decl.value.replace(pxReg, (matchStr, num) => {
                return num/options.base + 'rem';
            });
        }
    }
}

通过字符串的 replace 方法来做替换,第一个参数是匹配的字符串,后面的参数是分组,第一个分组就是 px 的值。

计算 px 对应的 rem 需要 1rem 对应的 px 值,可以支持通过 options 来传入。

然后我们测试下:

postcss([plugin({
    base: 100
})]).process('a { font-size: 20px; }').then(result => {
    console.log(result.css);
})

可以看到,已经正确的做了转换:

postcss插件中怎么自动转换px到rem

当然,我们这个插件只是案例,还不够完善,要做的完善的话需要更复杂的正则。

总结

postcss 是 css 的 transpiler,就像 babel 是 js 的 transpiler 一样,而且 postcss 的 AST 只有几种节点,比较简单,也可以通过 astexplorer.net 来可视化的查看。

postcss 也提供了插件功能,可以做一些自定义的分析和转换。

我们实现了简单的 px 自动转 rem 的插件:

rem 是通过等比缩放的方式来达到一套样式适配不同设备宽度的显示的方案,需要做 px 到 rem 的转换,这件事可以用 postcss 插件来自动来做。

其实 postcss 插件的分析和转换功能还有很多的应用,比如切换主题色,从白到黑,完全就可以用 postcss 自动分析颜色的值,然后做转换。

关于postcss插件中怎么自动转换px到rem就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: postcss插件中怎么自动转换px到rem

本文链接: https://www.lsjlt.com/news/88765.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • postcss插件中怎么自动转换px到rem
    这篇文章将为大家详细讲解有关postcss插件中怎么自动转换px到rem,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 post...
    99+
    2022-10-19
  • vue项目中怎么使用pinyin转换插件
    今天小编给大家分享一下vue项目中怎么使用pinyin转换插件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用pinyin...
    99+
    2023-06-29
  • css3中怎么实现一个可滑动跳转的分页插件
    css3中怎么实现一个可滑动跳转的分页插件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。代码如下:<div class="pa...
    99+
    2022-10-19
  • 怎么在laravel数据库中将查询结果自动转换成数组
    本篇文章为大家展示了怎么在laravel数据库中将查询结果自动转换成数组,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。引用use PDO; DB::setFetchMode(PD...
    99+
    2023-06-06
  • 怎么在Java中实现session过期后自动跳转到登陆页功能
    这篇文章主要为大家详细介绍了怎么在Java中实现session过期后自动跳转到登陆页功能,文中示例代码介绍的非常详细,具有一定的参考价值,发现的小伙伴们可以参考一下:Java是什么Java是一门面向对象编程语言,可以编写桌面应用程序、Web...
    99+
    2023-05-30
    java session
  • HTML网页中回车后form自动提交跳转到其他页面怎么解决
    今天小编给大家分享一下HTML网页中回车后form自动提交跳转到其他页面怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作