一、基本介绍
1，什么是 Sass?
-
Sass 是 Syntactically Awesome StyleSheets 的缩写。
-
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
- 使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
2，Sass 的功能特色
- 完全兼容 CSS3
- 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令 (control directives)等高级功能
- 自定义输出格式
3，Sass 与 SCSS 的关系
（1）Sass 有两种语法格式。一种是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"：
- 这是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。
- 这种格式以 .sass 作为拓展名。
（2）另一种是后来官方在 2010 年推出了一个全新的语法格式，叫做 SCSS (Sassy CSS) ：
- 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。
- 此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。
- 这种格式以 .scss 作为拓展名。
二、基本用法
1，嵌套
（1）Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。
但要注意避免过度的嵌套，过度的使用嵌套会让产生的 CSS 难以维护。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
（2）上面样式编译后产生的 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;
}
2，变量 $
（1）变量用来存储需要在
CSS 中复用的信息，例如颜色和字体。
SASS 通过
$ 符号去声明一个变量。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
（2）编译后上面例子中变量
$font-stack 和
$primary-color 的值将会替换所有引用他们的位置。
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
3，引入 @import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
（1）比如我们创建一个
foo.scss，里面定义了两个变量：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
（2）在另一个
SASS 中可以使用
@import 引入这个
scss 片断：
@import 'foo.scss';
body {
font: 100% $font-stack;
color: $primary-color;
}
（3）编译后的最终
CSS 如下：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
4，混合 Mixin
混合（Mixin）用来分组那些需要在页面中复用的 CSS 声明，开发人员可以通过向 Mixin 传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用。
（1）
SASS 目前使用
@mixin name 指令来定义混合，然后使用
@include name 指令引用混合样式。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
（2）最终编译的结果如下：
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
5，继承 @extend
继承是 SASS 中非常重要的一个特性，可以通过 @extend 指令在选择器之间复用 CSS 属性，并且不会产生冗余的代码。
（1）下面一个继承样例：
// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
.warning {
@extend %message-common;
border-color: yellow;
}
（2）最终生成的
CSS 样式如下，可以发现该方式能够避免在
HTML 元素上书写多个
class 选择器：
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
6，操作符
所有数据类型均支持相等运算
== 或
!=，此外，每种数据类型也有其各自支持的运算方式：
-
数字运算：SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
-
颜色值运算：颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。
-
字符串运算：+ 可用于连接字符串。
-
布尔运算：SassScript 支持布尔型的 and、or 以及 not 运算。
-
函数：SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用。
（1）下面样例我们对宽度进行简单的计算：
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
（2）最终生成的 CSS 样式如下所示，可以看到 SASS 提供的算术运算符让开发人员可以更容易的将像素值转换为百分比：
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
7，父选择器 &
Scss 使用"
&"关键字在
CSS 规则中引用父级选择器：
- 无论 CSS 规则嵌套的深度怎样，关键字"&"都会使用父级选择器级联替换全部其出现的位置。
- "&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀。
（1）下面是一个父选择器的使用样例：
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
（2）最终生成的
CSS 样式如下所示：
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}
8，嵌套属性
CSS 许多属性都位于相同的命名空间（例如 font-family、font-size、font-weight 都位于 font 命名空间下），Scss 当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下。
（1）下面是一个书写嵌套属性的样例：
.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
（2）最终生成的
CSS 样式如下所示：
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
8，注释 /* */ 与 //
Sass 除了支持标准的 CSS 多行注释 /* */，还提供了单行注释 //。前者会被完整输出到编译后的 CSS 文件中，而后者则不会。
（1）下面是一个同时使用多行、单行注释的样例：
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
（2）最终生成的
CSS 样式如下所示：
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
a { color: green; }