专栏首页性能与架构什么是 CSS 预处理器 与 后处理器

什么是 CSS 预处理器 与 后处理器

CSS处理器是做什么的?

CSS本身不是编程语言,所以在项目越来越大时,开发和维护就会越来越复杂

CSS处理器做的事情 就是帮助我们提高大规模开发时的效率

CSS 预处理器

CSS 预处理器是一种语言,用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题

例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处

Sass、LESS、Stylus 是目前最主流的 CSS 预处理器

以 LESS 为例:

LESS
.opacity(@opacity: 100) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}
.sidebar {
 .opacity(50);
}

以上 DSL 源代码 (LESS),编译成 CSS:

.sidebar {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

实现原理

1. 取到 DSL 源代码 的 分析树

2. 将含有动态生成相关节点的分析树 转换为 静态分析树

3. 将 静态分析树 转换为 CSS 的 静态分析树

4. 将 CSS 的 静态分析树 转换为 CSS 代码

优点

语言级逻辑处理,动态特性,改善项目结构

缺点

采用特殊语法,框架耦合度高,复杂度高

CSS 后处理器

CSS 后处理器 是对 CSS 进行处理,并最终生成 CSS 的 预处理器,它属于广义上的 CSS 预处理器

比如最近比较火的 Autoprefixer,可以对css自动处理兼容性问题

示例

以 Autoprefixer 为例:

.container {
  display: flex;
}
.item {
  flex: 1;
}

将以上标准CSS,编译为处理了兼容性的 生产环境 CSS:

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

可以看到,编译前 与 编译后 的代码都是 CSS

实现原理

1. 将 源代码 做为 CSS 解析,获得 分析树

2. 对 CSS 的 分析树 进行 后处理

3. 将 CSS 的 分析树 转换为 CSS 代码

优点

使用 CSS 语法,容易进行模块化,贴近 CSS 的未来标准

缺点

逻辑处理能力有限

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浏览器的渲染阻塞

    浏览器渲染的步骤 (1)浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型) (2)解析CSS去构造...

    dys
  • 2016前端开发者调查结果

    最流行的JS库和框架 ? 主要看绿色柱和橙色柱即可,绿色 相当于 知名度,橙色 相当于 使用程度。 使用最多的库和框架: jquery,underscore,l...

    dys
  • 图解JavaScript原型链

    假设父类 parentScope 有如下成员属性 : aString, aNumber, anArray, anObject 子类 childScope 继...

    dys
  • 前端修仙之路:从“路人”到大神,走对这几步很重要

    HTML 与 CSS基础 前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式...

    BestSDK
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅
  • 什么是CSS预处理器

    小胖
  • 7 个开放式 CSS 面试题及回答策略 [每日前端夜话0x2E]

    这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。

    疯狂的技术宅
  • CSS中的@关键字

    大家可能在CSS中见到过字符@然后加一些关键字的用法,这种用法就称之为AT规则,在CSS中,种类还是很多的,这里总结列举下。

    javascript.shop
  • awesome-css-cn命名习惯和方式参考其他资源原文链接

    CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

    琯琯
  • 前端开发,从草根到英雄(第一部分)

    我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

    用户1667431

扫码关注云+社区

领取腾讯云代金券