Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
两种语法格式格式：1.scss 2.sass（缩进代替花括号），可以相互导入和转换
嵌套选择器
父选择器&
当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如
属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。命名空间也可以包含自己的属性值，例如：
注释
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会
将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。
插值语句 (interpolation) 也可写进多行注释中输出变量值：
SassScript
nteractive Shell
可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的SassScript 查看输出结果：
数据类型
SassScript 支持 6 种主要的数据类型：
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
除法运算/
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
颜色值运算
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
字符串运算
+ 可用于连接字符串。注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
空的值被视作插入了空字符串：
布尔运算
SassScript 支持布尔型的 and or 以及 not 运算。
插值语句#{}
变量$
SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：
变量定义!default
@-Rules 与指令
@import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
Sass 允许同时导入多个文件
@import "rounded-corners", "text-shadow";
导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
编译为
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
分音
如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
@import "colors";
上面的例子，导入的其实是 _colors.scss 文件
注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。
嵌套@import
大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。
假设example.scss 文件包含以下样式：
.example {
color: red;
}
然后导入到 #main 样式内
#main {
@import "example";
}
将会被编译为
#main .example {
color: red;
}
@extend
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
上面代码的意思是将 .error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error。
其他使用到 .error 的样式也会同样继承给 .seriousError，例如，另一个样式 .error.intrusion 使用了 hacked.png 做背景， class="seriousError intrusion"> 也同样会使用 hacked.png 背景。 .error.intrusion { background-image: url("/image/hacked.png"); } Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。 // This ruleset won't be rendered on its own. #context a%extreme { color: blue; font-weight: bold; font-size: 2em; } 占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。 .notice { @extend %extreme; } 编译为 #context a.notice { color: blue; font-weight: bold; font-size: 2em; } 如果 @extend 失败会收到错误提示，比如，这样写 a.important {@extend .notice}，当没有 .notice 选择器时，将会报错，只有 h1.notice 包含 .notice 时也会报错，因为 h1 与 a 冲突，会生成新的选择器。 如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的，例如： a.important { @extend .notice !optional; } 在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。 下面的例子是可行的： @media print { .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } } 但不可以这样： .error { border: 1px #f00; background-color: #fdd; } @media print { .seriousError { // INVALID EXTEND: .error is used outside of the "@media print" directive @extend .error; border-width: 3px; } } 默认情况下，@at-root 只排除选择器。但是，也可以使用 @at-root 移出嵌套指令（例如 @media）。例如： @media print { .page { width: 8in; @at-root (without: media) { color: red; } } } 编译为 @media print { .page { width: 8in; } } .page { color: red; } @debug 指令将 SassScript 表达式的值打印到标准错误输出流。它对于调试具有复杂 SassScript 的 Sass 文件很有用。例如： @debug 10em + 12em; 编译为 Line 1 DEBUG: 22em 当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码： p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } 编译为 p { border: 1px solid; } @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } 编译为 .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } @each 指令的格式是 $var in @each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如： @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } 编译为 .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); } @each 指令还可以使用多个变量，如 @each $var1, $var2, ... in 。如果是列表列表，则子列表的每个元素都分配给相应的变量。例如： @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } 编译为 .puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url('/images/sea-slug.png'); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url('/images/egret.png'); border: 2px solid white; cursor: move; } @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如： $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; } @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } .page-title { @include large-text; padding: 4px; margin-top: 10px; } 也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。 @mixin silly-links { a { color: blue; background-color: red; } } @include silly-links; 编译为 a { color: blue; background-color: red; } @mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue, 1in); } 编译为 p { border-color: blue; border-width: 1in; border-style: dashed; } 混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值 混合指令也可以使用关键词参数，上面的例子也可以写成： p { @include sexy-border($color: blue); } h1 { @include sexy-border($color: blue, $width: 2in); } 有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理： @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } 编译为 .shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; } 参数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用： @mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); } 编译为 .primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; } 在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方： @mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } } 编译为 * html #logo { background-image: url(/logo.gif); } 为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示(使用+时报错) $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } 编译为 #sidebar { width: 240px; } 与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。 下面附上示例代码： 占位符选择器%
!optional 声明
在指令中延伸
@at-root (without: ...) and @at-root (with: ...)
@debug
@warn
@error
控制指令
@if
@for
@each
, $var 可以是任何变量名，比如 $length 或者 $name，而
是一连串的值，也就是值列表。
多重分配
@while
混合指令@mixin
引用混合样式@include
参数
参数变量
向混合样式中导入内容@content
函数指令@function