什么是 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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kiba518

C#语法——事件,逐渐边缘化的大哥。

事件最常见的比喻就是订阅,即,如果你订阅了我的博客,那么,当我发布新博客的时候,你就会得到通知。

983
来自专栏王鹤的专栏

Vue.js 2.0源码解析之前端渲染篇

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。...

5.8K0
来自专栏IMWeb前端团队

:before,:after伪元素妙用

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容...

28110
来自专栏jiajia_deng

设置 Notepad++ 制表符(Tab 缩进)宽度为2个空格大小

1462
来自专栏数据小魔方

动态图表5|列表框(offset函数)

今天要跟大家分享的是动态图表5——列表框(offset函数)。 制作思路与前一篇中使用index函数制作思路基本一致,先用列表框制作菜单,然后使用offset函...

3435
来自专栏前端知识分享

第80天:jQuery插件使用

jQuery其他补充 + 4.1 链式编程: end()补充 * 补充五角星 评论案例 * 第一步:鼠标移入,当前五角星和前面的五角星变实体。后...

881
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1182
来自专栏前端布道

CSS预处理器的对比 — sass、less和stylus

本文根据Johnathan Croom的《sass vs. less vs. stylus: Preprocessor Shootout》所译,整个译文带有我们...

1.1K6
来自专栏专注 Java 基础分享

Java ---自定义标签

     本篇文章介绍自定义标签,可能在工作中很少涉及到自己来定义一个标签库,因为我们基本上都是使用的大神写的标签库,基本上直接使用即可,但是从自身的发展来看,...

2695
来自专栏知晓程序

「大众点评点餐」小程序开发经验 02:视图

1983

扫码关注云+社区

领取腾讯云代金券