CSS预编译语言Sass、Less和Stylus
为什么前端常常被叫做前端设计师，而不是程序员，可能是因为前端常常要写CSS,CSS不是一种编程语言，而是描述网页样式的语言，CSS能够呈现的效果固然重要，但是写CSS样式的工作却很繁琐。
既然写CSS是一项简单而繁琐的工作，那么能不能从把前端从枯燥无味的工作中解放出来，去做较复杂的工作呢，答案就在下面，一种叫CSS预处理器的语言。
CSS预处理器（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
什么是CSS预处理器
CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。
CSS预处理器的种类
目前最主流的三个预处理器Sass 、 Less和 Stylus
-
SASS:2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架。Sass默认使用 .sass扩展名。
现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则(受LESS影响)和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS（SCSS默认使用 .scss扩展名），在Sass3之后的版本都支持这种语法规则。
-
LESS：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的，Less默认使用.Less扩展名。
-
Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS，Stylus的默认使用.styl扩展名。
预处理器语法
预处理器语法一般包括：
- 变量
- 嵌套
- 混合Mixins
- 运算
- 导入 (Import)
- 函数
语法
CSS预编译语言的语法都非常简单，如果你的编辑器给力的话，file watching会自动找出语法错误。
语法上Sass3、Scss和Less非常相似，旧版Sass和Stylus特殊一些，旧版Sass我们就了解一下，Stylus的语法更加灵活一些,功能也更强大一些。
例如同样是编译成
/*旧版sass语法*/
h1
color: #000
font-size: 24px
1、Sass
/*旧版sass语法*/
h1
color: #000
font-size: 24px
2、SCSS
/*scss语法*/
h1{
color: #000;
font-size: 24px;
}
3、LESS
/*less语法*/
h1{
color: #000;
font-size: 24px;
}
4、Stylus
/*Stylus语法的多样式*/
h1{
color: #000;
font-size: 24px;
}
h1
color: #000
font-size: 24px
h1
color #fff
font-size 24px
变量
/* 1、Scss的变量必须是$开始*/
$mainColor: #000;
h1{
color: $mainColor;
}
/* 2、Less 的变量名使用 @ 符号开始*/
@mainColor: #000;
h1{
color: @mainColor;
}
/* 4、Stylus 的变量名不要用 @ 开头， =赋值 */
mainColor = #000;
h1{
color: mainColor;
}
嵌套
如果你需要在CSS中相同的parent引用多个元素，你需要一遍一遍的去写parent。用CSS预处理器，就可以少些很多单词，而且父节点关系一目了然。
下面将不再介绍老版sass的写法，直接介绍scss写法
同样生成
nav{
color: #000;
font-size: 16px;
}
nav a{
color: #0000cc;
font-size: 18px;
}
nav a.first{
color:red
}
/*Scss、less、Stylus的嵌套,伪类嵌套都是使用&*/
nav {
color: #000;
font-size: 16px;
a {
color: #0000cc;
font-size: 18px;
&.first {
color: red;
}
}
}
/*Stylus的嵌套还可以这样写*/
nav
color #000
font-size 16px
a
color #0000cc
font-size 18px
&.first
color red
Mixin混合
CSS预编译工具允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上。 如：
/*Scss、less混合语法*/
.circle{
border-radius: 100%;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle
}
.big-circle{
width: 100px;
height: 100px;
.circle
}
/*Stylus Mixin混合语法*/
circle{
border-radius: 100%;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
circle
}
.big-circle{
width: 100px;
height: 100px;
circle
}
- 混入可以传递参数
/* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle
*/
.circle($radius){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle(5px)
}
2、混入可带默认值
/* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle，：改为=
*/
.circle($radius:5px){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle
}
/* 这是Stylus样例 */
circle($radius=5px){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
circle
}
运算
/* 这是Scss样例 */
$test:300px;
.test_01{
width: $test + 20px;//
height: $test*2 ;
color: #ccc - 10;
}
/* 这是Less样例 */
@test:300px;
.test_01{
width: @test + 20px;//
height: @test*2 ;
color: #ccc - 10;
}
/* 这是Stylus样例 */
test=300px
.test_01{
width: test + 20px;//
height: test*2 ;
color: #ccc - 10;
}
函数
Sass、Less和Stylus都提供了丰富的内置函数，Stylus更允许自定义函数，使用的时候自行查询吧。
导入
几种CSS预编译语言的导入语法是相同的。与css3的@import看起来写法也相同，但css3的@import会引起异步加载。并不是我们期望的
CSS预编译器@import解决了这个问题，它能将多个样式文件合并为一个，本质上自是方便前端管理代码，并不会异步加载。
@import 'reset.scss' //scss中导入样式
@import "reset"; // less导入默认导入为less文件
@import "reset.css" // Stylus导入默认导入为css文件
循环语句
Sass（Scss），Stylus支持循环语句
分支语句
Sass（Scss），Stylus支持条件语句