基础知识
这部分内容摘自 Sass Basics。
预处理 Preprocessing
预处理功能，就是将 SASS/SCSS 格式的文件输出为 CSS 文件，可以对单个文件进行预处理，也可以对指定目录进行预处理，还可以对指定目录进行实时监控，基本语法如下：
sass input.scss output.css
sass --watch app/sass:public/stylesheets变量 Variables
有了变量功能，就可以很方便地实现一处定义、多处使用，终于不用一遍遍地复制粘贴了。SASS 中的变量以 $ 开头。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}输出后的 CSS 文件如下所示：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}嵌套 Nesting
有了嵌套功能，可以更高效地书写 CSS，不过嵌套的层数过多会使得代码质量严重下降，所以要严格控制嵌套的层数，以不超过三层为宜。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}处理后生成的 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;
}引入 Partials
引入文件与 C/C++ 中的头文件很相似，都是把常用的代码段保存至文件中，然后在其它文件中引用。SASS 中的引入文件以下划线开头：_partial.sass，在其它文件中引用时，用命令 @import partial 即可，引用时不需要带文件名开头的下划线和扩展名。
导入 Import
CSS 本身就提供了导入的选项，这样就将 CSS 进一步分割成了代码更少、更容易维护的代码段，但是在 CSS 中每一条 @import 语句都会产生一次 HTTP 请求。SASS 则在此基础上进一步做了改进，每一个需要从别处导入内容的 CSS 文件，SASS 都会将需要导入的内容合并到当前的 CSS 文件中，这样就不会有 CSS 那样产生额外的 HTTP 请求的情况了。
比如现在有一个引入文件 _reset.scss，在另一个文件 base.scss 中要引用它，两个文件内容如下所示：
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}经过 SASS 处理后，最终的 CSS 文件如下：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}混合 Mixins
有时候同一个属性为了考虑到浏览器兼容性，就需要写好几行类似的语句，如果这组属性值还会经常变，改动起来的工作量可就要了老命了。不过 SASS 提供了混合功能，就能够让我们“一次修改，整体更新”。这个混合功能，其实和常见的编程语言中的函数功能很相似，看代码：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }通过上面的代码，就很容易能看明白混合是如何定义并被调用的，这里还用到了前面介绍的变量概念。最后生成的 CSS 如下所示：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}这个示例代码还涉及到了浏览器前缀这个概念，Vendor Prefix:为什么需要浏览器引擎前缀这篇文章也讲了浏览器前缀的作用、适用情况及其用法，但是之后即将学习的 Gulp 可以集成 Autoprefixer，这样就可以把补充浏览器前缀的工作交给自动化工具，所以在这里不再深入讨论这个概念了。
继承 Extend/Inheritance
继承可是 SASS 中最常用的功能之一，通过 @extend 命令，可以将应用于一个选择器的属性分享给另一个选择器，这样就可以进一步简化 SASS 的代码了。比如下面的示例代码先是创建了一个基础的 message 选择器，然后在此基础上又创建了 success、error、warning 这三个“派生”的选择器，它们仨共享 message 的属性，同时各自又有不同的边框属性。
.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;
}并且最终生成的 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;
}运算符 Operators
在 SASS 中，还可以进行简单的加减乘除以及取余这五种运算。
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}上面的代码创建了一套基础宽度为 960px 的流式网格（fluid grid），并且根据不同部分的宽度计算其对应的百分比，所生成的 CSS 如下：
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}好了，基础知识就讲到这里了，现在就拿起自己的代码来练习吧！
