Open LLwanran opened 5 years ago
在写CSS的时候我们会发现，为了兼容浏览器等原因，我们往往需要写很多冗余的代码，CSS预处理器就是为了解决CSS的这些问题，简化CSS代码的编写。
目前最主流的CSS预处理器是Sass、Less 和 Stylus，它们不同于CSS的特性大概就是：
基本语法
嵌套语法
变量
@import
混入
继承
函数
逻辑控制
Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。
另外，用过 PostCSS 的同学可能会存在些疑问：这货和日常用的 CSS 预处理器有什么区别，有什么优势？CSS 后处理器又是个什么东西... ...？ 一句话解释 PostCSS 是什么：PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。 简而言之，PostCSS 可以将 CSS 转变成 JavaScript 可以操作的数据格式。基于 JS 写的插件可以完成上面所说的那些操作。PostCSS 本身不会对 CSS 代码作任何修改，它只是为插件提供了一些接口，方便插件完成它们各自的功能。
另外，用过 PostCSS 的同学可能会存在些疑问：这货和日常用的 CSS 预处理器有什么区别，有什么优势？CSS 后处理器又是个什么东西... ...？
一句话解释 PostCSS 是什么：PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。 简而言之，PostCSS 可以将 CSS 转变成 JavaScript 可以操作的数据格式。基于 JS 写的插件可以完成上面所说的那些操作。PostCSS 本身不会对 CSS 代码作任何修改，它只是为插件提供了一些接口，方便插件完成它们各自的功能。
在写CSS的时候我们会发现，为了兼容浏览器等原因，我们往往需要写很多冗余的代码，CSS预处理器就是为了解决CSS的这些问题，简化CSS代码的编写。
目前最主流的CSS预处理器是Sass、Less 和 Stylus，它们不同于CSS的特性大概就是：
基本语法
嵌套语法
变量
@import
混入
继承
函数
逻辑控制
Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。
重要：PostCSS 不是预处理器，千万不要搞混了！