预处理
css本身是很有用的，但样式表正在变得越来越庞大、复杂以至于难以维护。预处理可以解决这个问题。sass可以让你使用一些css本身没有的东西，比如变量、嵌套、混合、继承和一些其他特别的特性，让使用css变得更加得心应手。
变量
试想一下在样式表中可以重复使用变量。你可以在样式表中用变量存储一些例如：颜色、字体栈、或者其他css值，然后重复使用他们。sass用$符号来设置一个变量，例子如下：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
当运行sass之后，sass会把我们定义的变量放置到css样式表的指定地方。这个是非常强大的，当我们希望我们定义的颜色在整个网站保持一致性的时候。
嵌套
当你写html的时候，你会发现它有清晰的嵌套和视觉的层次。而css则没有。sass会让你嵌套你的css选择器就像是用html嵌套的视觉层次一样。请注意，过多的嵌套规则将会有过多的css，从而导致代码难以维护，这通常是一个不好的做法。
考虑到这一点，这里有个关于一些经典样式的网站导航案例：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
你会发现css的ul、li、a选择器嵌套在了nav选择器里面。这样组织你的css代码会变得更加可读，而编译后生成的css代码如下：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
局部
你可以创建一个包含css小片段的sass文件，然后再其他sass文件中引入这个sass文件。这会让你模块化你的css代码而且会让代码越来越容易维护。片段sass文件通常以下划线开头命名，如命名为：_partial.scss。这样的命名方式会让sass知道它是一个片段sass文件，不会编译后生成一个css文件。引入这样的sass片段文件可以用指令@import。
Import
css有个引入选项，可以把你的css代码分割成更小、更容易维护的部分。唯一的缺点就是每次你引入一个文件，就需要一次http请求。而sass文件顶端的@import引入文件不需要再一次的http请求。sass将会把在sass文件中需要引入的文件和本文件整合在一起，然后只会发送一个整合后的css文件到服务器，这样就会减少http的请求次数。
现在，我们有两个sass文件， _reset.scss 和 base.scss。我们将在base.scss文件中引入_reset.scss文件。
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
注意，在base.scss中我们用了@import 'reset';来引入文件。sass是很聪明的，它会自动知道这个是sass文件，从而就不需要给引入的文件加scss文件后缀了，编译后的css文件如下：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
混合器
css中的一些写法写起来是有点乏味的，尤其是css3中存在的一些前缀。混合器mixin能让你创建一个css申明组，可以在整个网站中重复使用。你甚至可以传递参数让你的混合器更加灵活。混合器最好的一个应用就是添加浏览器的前缀，如下面border-radius例子：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
创建一个混合器，首先要通过@mixin ，然后给他一个名字，如：border-radius。也可以传递参数$radius，像这样border-radius($radius),创建mixin完成后，就可以使用@include加混合器名字来使用混合器。编译后的css代码如下：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
继承
继承是sass中最实用的特性之一。使用@extend指令可以让我们从一个选择器到另一个选择器来共享一段css属性。它可以让你的sass文件变得非常的干练。下面的例子我们将会创建一系类的信息关于错误的、警告的和成功的。
.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中。
生成的css代码神奇的发生了改变，它避免了你要写多个类来达到同样的效果。编译后的css代码：
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
运算符
在css中做数学运算是很有用的，sass有少许标准的数学运算符，如+、-、*、/、和 %。下面的例子我们将做一些简单的数学运算来计算aside和article的宽度。
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
我们创建了一个简单的基于960px的流式网格，sass中的运算符可以毫无障碍的把像素值转换为百分比。编译后的css代码如下：
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
