css 预处理器是如何产生的？它又可以做什么？又能带来哪些好处？
说起 css 大家肯定都不陌生，我们使用 HTML 进行页面布局时都需要使用 css 进行样式的编写。 学过 css 的都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。css只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。
所以很自然的就有人就在想，能不能给 CSS 像其他程序语言一样，加入一些编程元素，让 CSS 能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
CSS预处理器的概念： 用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件， 然后开发者就只要使用这种语言进行编码工作。
使用css预处理器的好处： CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题 可以使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性。让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
常用的三大css预处理器详解
到目前为止，CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言。本文将对最常用最优秀的sass、less 和 stylus 进行讲解。
less使用变量 必须以@开头
@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;
/*调用变量*/ | /*转译出来的CSS*/
----------------------------------------+-------------------------------
body { | body {
color: @mainColor; | color:#963;
border:1px @borderStyle @mainColor; | border:1px dotted #963;
max-width: @siteWidth; | max-width:1024px;
} | }
sass使用变量 必须以$开头
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
/*调用变量*/ | /*转译出来的CSS*/
------------------------------------------+------------------------------
body { | body {
color: $mainColor; | color: #963;
border:1px $borderStyle $mainColor; | border:1px dotted #963;
max-width: $siteWidth; | max-width: 1024px;
} | }
stylus使用变量 声明变量没有限定(不能应用@) 结尾 ; 可有可无
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
/*调用变量*/ | /*转译出来的CSS*/
----------------------------------------+--------------------------------
body | body {
color mainColor | color: #963;
border 1px $borderStyle mainColor | border:1px dotted #963
max-width siteWidth | max-width:1024px;
| }
作用域(Scope变量)：查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。
sass ：没有全局变量 当重复声明一个变量的值时 后面的值覆盖前面的值
less : 先找局部定义的变量，如果没有找到，则向上查找 直到根为止 即全局
stylus : 同上less
三者的比较
Sass、LESS 和 Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本相似，只是使用规则上有所不同。
1、Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，
因为他更像CSS的标准；
2、各自特性实现功能基本相似，只是使用规则上有所不同；
3、Sass和Stylus具有类似于语言处理的能力，比如说条件语句、循环语句等，
而LESS需要通过When等关键词模拟这些功能，在这一方面略逊一层；
关于css预处理器本文就简单的介绍到这里，希望这篇文章对不知道该使用哪一种编译器的你有一定的帮助。我们下篇文章再见！
