在前端开发中，类似Less，Sass这样的预处理器，变得越来越常见，由于CSS发展的制约，使得CSS开发时，当代码量越来越大，项目变得难以管理和维护。
Sass可以让你使用一些在CSS中没有的特性，比如变量，nesting，mixins,继承和其他好的特性，让你编写CSS变得更加方便。
所以，学习并使用一款CSS预处理器也渐渐变成一个前端工程师必不可少的技能。在多个预处理器中，我选择了Sass。
一些基础
Sass有两种语法，使用哪一种取决于个人爱好，只是两种格式需要对应不同的后缀。
- SCSS，本教程使用这个语法。这是一个CSS语法的扩展，这意味着，在CSS中可以使用的功能，在SCSS中都是同样的功能。同时，SCSS支持所有CSS hacks和特定浏览器语法。详细情况在 这里
- SASS,这是比较老的语法，使用缩进代替了大括号，使得写起来更加快捷，看起来也更清爽
开始使用
当安装好Sass之后，你可以使用命令 sass --watch app/stylesheets_dirctory
使用变量
你可以使用$来定义变量
$font-stack: Helvetica, sans-serif;
body {
font: 100% $font-stack;
}
经过Sass编译之后，输出的文件是这样的：
body {
font: 100% Helvetica, sans-serif;
}
这样的的话，你就可以在整个项目中共享一些同样的变量，而不必每次重新定义，当需要做更改的时候，只有改变变量的值，在重新编译之后，使用这个变量的地方就自动更新为新的值了。
嵌套（Nesting）
在HTML里面，各个元素是可以嵌套的，而在CSS里，目前还不可以原生支持这样的功能，Sass就能帮我们实现。
nav {
font-size: 1.5em;
li {
display: inline-block;
}
}
经过编译后：
nav {
font-size: 1.5em;
}
nav li {
display: inline-block;
}
Import
Sass提供了Import的功能，你可以把Sass写到多个文件，然后自由组合他们，然后编译的时候，他们会自动合并到单个文件里。
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
在编译之后：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Mixins
当前的浏览器，有的特性可能需要你写不同的前缀，比如 -webkit -moz -ms，Mixins提供了一个快捷的方法使你从写这些烦人的前缀中解放出来。你可以提供多个value值来定制自己的Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
在编译过后：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
扩展和继承
这可能是SASS里最有用的一个功能，它让你的CSS拥有了继承的能力，使用@extend这个关键字继承一个CSS集合，解决了很多不必要的重复。直接看官方的例子吧：
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
在编译之后：
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
运算符
Sass拥有数学计算的功能，例如+, -, *, /, %
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
在编译之后：
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
作者注：这篇文章大部分内容来自官方入门指南，需要更多内容可以直接看官方文档。
