关于css 的AST 语法树的理解

css 处理插件大致分为压缩css和给css添加浏览器兼容前缀。

cssmin 可以压缩css,大致原理是将使用正则将css 中的注释和空格删除。

px2rem 插件是将css 中的px 转换为 rem,它的原理是 调用了css 的AST对象 ,css插件将css内容解析成 一个javascript对象,即css AST 抽象语法树,然后遍历语法树,将对象中的px转换为rem,然后再将对象转换为css文件。

 

这是一些独立的css处理插件,目前css 处理插件最火的就是postcss

postcss 只是一个平台,它只负责将css 转换成AST语法树,然后,运行postcss上的插件修改css Ast对象,最后将AST转换为css内容。

我们自己也可以编写postcss 插件,按照官方的例子:https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin 很快就可以实现一个简单的post css 插件

post 转换为css语法的原理是:将每一个selector 归为一块 名为rule,然后将selector 内的每一个属性归为一块,名为declaration

插件可以遍历这些属性,然后更改例子:

如果

var postcss = require('postcss')module.exports = postcss.plugin('postcss-test-plugin', function (opts) {opts = opts || {}// Work with options herereturn function (root, result) {//遍历 所有的 ruleroot.walkRules(function(rule){//打印出rule 的选择器console.log(rule.selector)// 遍历rule内所有的 declaration,rule.walkDecls(function(decl){// 打印出 属性 和值    console.log(decl.prop+" = "+decl.value)})})}
})

以一个简单的css为例

:

.item-right {
text-align: right
}

.item-left {
line-height: 24px
}

输出是:

.item-right
text-align = right
.item-left
line-height = 24px

例子地址 https://github.com/muyiwei/postcss-plugin-test.git

 

转载于:https://www.cnblogs.com/chillaxyw/p/10705929.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux rpm 删除

linux rpm 删除命令格式:rpm -e ( or --erase) options pkg1 ... pkgN参数pkg1 ... pkgN :要删除的软件包详细选项--test 只执行删除的测试--noscripts 不运行预安装和后安装脚本程序--nodeps 不检查依赖性 转载于:https://www.cnblogs.com/wllyy189/arc…

同方专转本计算机视频,同方2011专转本计算机

同方2011专转本计算机 (3页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.9 积分namespace W_{ public partial class Form1 : Form { bool isDotpressed false; decimal dOpDaTa1, dOpDaTa2, dre…

wps流程图怎么不能添加文字_windows不能访问共享文件夹,不能添加共享打印机时,怎么解决呢...

遇到文件夹共享不能访问或者打印机共享添加不了的问题,可以按照下面的方法来操作了。适用于windows7windows8、windows10操作系统。在同一个局域网中,你通过192.168.1.1200或网上邻居不能访问对方主机共享文件夹时,按下面的方法操作&#xff…

周末

每到周末的时候,我就感到压抑,无处可去,无事可做,我为什么那么在乎别人的看法呢?从不主动和人交流,话少的可怜,我一周说的话手指都能数出来,总是感到尴尬,不说话还常常苦闷别人不理…

[html] From表单提交时为什么会刷新页面?怎么预防刷新?

[html] From表单提交时为什么会刷新页面?怎么预防刷新? 因为早期网页交互模型只能是浏览器提交数据给服务器,服务器做出响应重新返回一个页面,浏览器加载这个页面进行显示。早期前端没有编程式发送网络请求的 API,更没…

ASP.NET中下载文件的几种方法

2008年5月27日17:44:07//TransmitFile实现下载 protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来解决使用Response.BinaryWrite 下载超过400mb的文件时导致Aspnet_wp.e…

cad中线段求和lisp_cad中连续线段变更圆滑弧形

下面我们就来看看如何在CAD中怎么把JPG图片插入页面中,并把图片中的图形做出线描的效果呢?这里我们用到CAD编辑工具来对此项功能以演示。方法/步骤首先我们要在电脑中安装CAD编辑工具来实现此操作。打开CAD软件。在菜单栏里找到插入命令,并在…

CF1142C U2(计算几何,凸包)

题目大意:平面上有 $n$ 个点,第 $i$ 个点是 $(x_i,y_i)$。问有多少条抛物线(二次项系数为 $1$),经过这些点中不同的两个点,并且内部(不含边界)没有任何这些点。重合的抛物线只算一次…

[html] web workers有用过吗?能帮我们解决哪些问题?

[html] web workers有用过吗?能帮我们解决哪些问题? 提供协程能力,如果有一个比较密集的计算任务,可以放到另一个进程中处理,等处理好了再把结果传回主程,这样主要进程就不会阻塞,页面可以正常…

计算机单词修改是否正确,计算机组装必懂的53个单词及装机步骤51条.doc

计算机组装必懂的53个单词及装机步骤51条2007-05-26 11:43计算机组装必懂的53个单词及装机步骤51条计算机组装DIY(Do It Yourself)至少要看懂的五十三个英文单词和缩写也许英语单词对大部分的电脑玩家不算是很困难的,但是对于一些老年用户来说,这些英语单…

matlab 矩阵jocobi迭代_第6章 解线性方程组的迭代法(基于MATLAB)

前面我们已经知道对于线性方程组,一般有两种数值解法:直接法和迭代法。直接法前面已经写过了,没看的同学可以移步阅读:直接法。本次主要讲述迭代法及其相应的MATLAB代码。考虑线性方程组当 为低阶稠密阵时一般采取直接法进行求解。…

全文服务(Microsoft 搜索)不可用。系统管理员必须启动此服务

全文服务(Microsoft 搜索)不可用。系统管理员必须启动此服务。1.打开sql server服务管理器 2.在服务下拉框中选microsoft seardh 3.点启动 4.并选中当启动os时自动启动服务 转载于:https://www.cnblogs.com/Kennytian/archive/2008/05/30/1210418.html

防火墙架构解析

防火墙本身就是一台为网络而设计的计算机,与通用计算机一样防火墙是由硬件和软件组成,现今防火墙有着多种硬件技术架构,不同的硬件架构有着各自不同的特点。先说明一下什么是处理器体系结构和体系架构。体 系 架 构 :CPU架构是CPU…

[html] 你有了解HTML5的地理定位吗?怎么使用?

[html] 你有了解HTML5的地理定位吗?怎么使用? var xdocument.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML"该浏览…

apache 修改服务器配置,Apache服务器配置全攻略

在使用子进程处理HTTP请求的Web服务器上,由于要首先生成子进程才能处理客户的请求,因此反应时间就有一点延迟。但是,Apache服务器使用了一个特殊技术来摆脱这个问题,这就是预先生成多个空余的子进程驻留在系统中,一旦有…

易驾佳智能机器人教练_机器人教练创始人马宏先生受邀到中国人民大学进行经验分享...

4月2日,北京易驾佳信息科技有限公司创始人、机器人教练创始人马宏先生受邀前往中国人民大学,与MBA在学学生分享企业经营管理经验。从个人创业发展历程、多年来对驾培行业的洞察及转型升级方向等方面与大家进行了分享、交流。期间,马宏先生跟大…

[html] 说说你对<meta>标签的理解

[html] 说说你对标签的理解 设置meta标签 设置页面长串数字不与跳转防止长串数字电话或以邮箱的形式外链出去 ## 设置meta标签 IE适配用于IE浏览器的适配 设置meta标签 移动端IOS用于适配苹果手机,用于全屏显示 设置meta标签 清除页面缓存Cache-Control头域Cache-C…

实现控件的随意拖动

因为客户要求程序要在浏览器上运行,但是这些信息(这个程序只在政府某部门内部使用)并不需要公开,所以我们选择使用Windows应用程序,并将该程序嵌入到网页中。。。。 就我个人做的这部分简单的说下,我负…

导出sql文件_(一)SQL基本知识

一 、SQL的特点1.综合统一:SQL集数据定义语言DDL、数据控制语言DCL的功能于一体,语言风格统一,可以独立完成数据库生 命周期中的全部活动(定义关系模式,插入数据,建立数据库;对数据库中的数据进 行查询和更…

文件下载时,文件名乱码问题

文件下载时,解决不同浏览器文件名乱码问题 public static String encodeFileName(HttpServletRequest request, String pFileName) {String userAgent request.getHeader("USER-AGENT");try {if (userAgent.contains("msie") || userAgent.con…