大话css预编译处理（一）通读介绍篇

1、什么是css预编译处理？

CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增长了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。CSS预编译的工做原理是提供便捷的语法和特性供开发者编写源代码，随后通过专门的编译工具将源码转化为CSS语法。
CSS预编译器几乎成为现现在开发CSS的标配，它从如下几个方面提高了CSS开发的效率：

1. 加强编程能力；
2. 加强可复用性；
3. 加强可维护性；
4. 更便于解决浏览器兼容性。

不一样的预编译器特性虽然有所差别，但核心功能均围绕这些目标打造，好比：

•    嵌套；
•    变量；
•    mixin/继承；
•    运算；
•    模块化；

嵌套是全部预编译器都支持的语法特性，也是原生CSS最让开发者头疼的问题之一；
mixin/继承是为了解决hack和代码复用；变量和运算加强了源码的可编程能力；
模块化的支持不只更利于代码复用，同时也提升了源码的可维护性。

2、为何要使用CSS预编译处理？

1.CSS有具体如下几个缺点：

1)    语法不够强大，好比没法嵌套书写，致使模块化开发中须要书写不少重复的选择器；
2)    没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，致使难以维护。

2.使用CSS预编译处理的优点：

使用CSS预处理器，能够提供 CSS 缺失的样式层复用机制、减小冗余代码，提升样式代码的可维护性。大大提升了咱们的开发效率。

3.使用CSS预编译处理的劣势：
CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让咱们开发工做流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易形成后代选择器的滥用。因此咱们在实际项目中衡量预编译方案时，仍是得想一想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

3、CSS主流预处理器：Sass、Less和Stylus

目前css主流预处理器是Sass、Less和Stylus，最先的CSS预编译器是2007年起源于Ruby on Rails社区的SASS，目前比较流行的其余CSS预编译器如Less、Stylus的诞生都必定程度上受到了SASS的影响和启发。

三大框架简介
一、 Sass：2007年诞生，最先也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受 LESS影响，已经进化到了全面兼容CSS的 SCSS。
其实如今的 Sass已经有了两套语法规则：一个依旧是用缩进做为分隔符来区分代码块的；另外一套规则和CSS同样采用了大括号（｛｝）做为分隔符。后一种语法规则又名 SCSS，在Sass3以后的版本都支持这种语法规则。

二、Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区以外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优势是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS作底层语言的。

三、Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区以内有必定支持者，在普遍的意义上人气还彻底不如SASS和LESS
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

4、CSS预处理器的选择

一、Sass
优势

1)    用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；
2)    可编程能力比较强，支持函数，列表，对象，判断，循环等；
3)    相比less有更多的功能；
4)    Bootstrap/Foundation等使用scss；
5)    丰富的sass库：Compass/Bourbon；

缺点

安装node-sass会常常失败或者报错，须要使用cnpm或者手工安装

二、Less
优势：

能够在浏览器中运行，实现主题定制功能；

缺点：

编程能力弱，不直接支持对象，循环，判断等；
@variable 变量命名和css的@import/media/keyframes等含义容易混淆；
mixin/extend的语法比较奇怪；
mixin的参数若是遇到多参数和列表参数值的时候容易混淆；

三、Stylus
优势：

来自NodeJS社区，因此和NodeJS走得很近，与JavaScript联系很是紧密。还有专门JavaScript API：
http://learnboost.github.io/stylus/docs/js.html
支持Ruby之类等等框架3.更多更强大的支持和功能

缺点：

人气不高和教程较少

总结：
Sass看起来在提供的特性上占有优点，可是LESS可以让开发者平滑地从现存CSS文件过渡到LESS，而不须要像Sass那样须要将CSS文件转换成Sass格式。Stylus功能上更为强壮，和js联系更加紧密。

5、CSS预处理器的学习

Sass中文文档： http://sass.bootcss.com/
Less中文文档： https://less.bootcss.com/
Stylus官方文档： http://stylus-lang.com/
Stylus 中文文档： https://www.zhangxinxu.com/jq...

若是你以为这篇文章对你有所帮助，那就顺便点个赞吧，点点关注不迷路~

黑芝麻哇，白芝麻发，黑芝麻白芝麻哇发哈！

前端哇发哈