嵌套规则

Sass允许将一套CSS样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

嵌套功能避免了重复输入父选择器，而且令复杂的CSS结构更易于管理：

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

编译为

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

父选择器&(Referencing Parent Selectors: $)

在嵌套CSS规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定hover样式时，或者当ruby元素有某个classname时，可以用&代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

编译后的CSS文件中&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

&必须为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

当父选择器含有不合适的后缀时，Sass将会报错。

属性嵌套(Nested Properties)

有些CSS属性遵循相同的命名空间(namespace)，比如font-family，font-size，font-weight都以font作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入,Sass允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

命名空间也可以包含自己的属性值，例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

占位符选择器%foo(Placeholder Selectors: %foo)

Sass额外提供了一种特殊类型的选择器：占位符选择器(placeholder selector)。与常用的id与class选择器写法相似，只是#或.替换成了%。必须通过@extend指令调用。
当占位符选择器单独使用时(未通过@extend调用)，不会编译到CSS文件中。

注释/**/与//(Comments: /**/ and //)

Sass支持标准的CSS多行注释/**/，以及单行注释//，前者会被完整输出到编译后的CSS文件中，而后者则不会，例如：

/* 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; }

编译为

/* 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; }

将!作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到CSS文件中，通常用于添加版权信息。

插值语句(interpolation)也可写进多行注释中输出变量值：

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

SassScript

在CSS属性的基础上Sass提供了一些名为SassScript的新功能。SassScript可作用于任何属性，允许属性使用变量、算数运算等额外功能。

通过interpolation，SassScript甚至可以生成选择器或属性名，这一点对编写mixin有很大帮助。

Interactive Shell

Interactive Shell可以在命令行中测试SassScript的功能。在命令行中输入sass -i，然后输入想要测试的SassScript查看输出结果：

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

变量$(Variables: $)

SassScript最普遍的用法就是变量，变量以美元符号开头，赋值与CSS属性的写法一样：

$width: 5em;

直接使用即调用变量

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

数据类型

SassScript支持6种主要的数据类型：

• 数字1,2,3,10px
• 字符串，有引号字符串与无引号字符串，"foo","bar",baz
• 布尔值，true,false
• 颜色blue #04a3f9 rgba(255,0,0,0.5)
• 空值，null
• 数组（list），用空格逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps,相当于javascript种的Object，(key1: value1, key2: value2)

SassScript也支持其他CSS属性值，比如Unicode字符集，或!important声明。然而Sass不会特殊对待这些属性值，一律视为无引号字符串。

字符串(Strings)

SassScript支持CSS的两种字符串类型：有引号字符串(quoted strings)，如"Lucida Grande","http://sass-lang.com";与无引号字符串(unquoted strings)，如sans-serif，bold，在编译CSS文件时不会改变其类型。只有一种情况例外，使用#{}（interpolation）时，有引号字符串将被编译为无引号字符串，这样便于在mixin种引用选择器名：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

数组(lists)

数组（lists）指Sass如何处理CSS中margin: 10px 15px 0 0或者font-face: Helvetica，Arial，sans-serif这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组——只包含一个值的数组。

数组本身没有太多功能，但Sass list functions赋予了数组更多新功能：nth函数可以直接访问数组中的某一项；join函数可以将多个数组连接在一起；append函数可以在数组中添加新值；而@each指令能够遍历数组中的每一项。

数组中可以包含子数组，比如1px 2px, 2px 6px时包含1px 2px和5px 6px两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成(1px 2px) (5px 6px)。变化是，之前的1px 2px, 5px 6px使用逗号分隔了两个子数组，而(1px 2px) (5px 6px)则使用空格分隔。

当数组被编译成为CSS时，Sass不会添加任何圆括号（CSS中没有这种写法），所以(1px 2px) (5px 6px)和1px 2px, 5px 6px在编译后的CSS文件中是完全一样的，但是它们在Sass文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。

用()表示不包含任何值得空数组。空数组不可以直接编译成CSS，比如编译font-family: ()Sass将会报错。如果数组中包含空数组或空值，编译时将被清除，比如1px 2px () 3px或1px 2px null 3px。

基于逗号分隔得数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如(1,)表示只包含1的数组，而(1 2 3,)表示包含1 2 3这个以空格分隔的数组的数组。

Maps

Maps可视为键值对的集合，键被用于定位值在CSS中没有对应的概念。和Lists不同Maps必须被圆括号包围，键值对被逗号分割。Maps中的keys和values可以是sassscript的任何对象（包括任意的sassscript对象）。和Lists一样，Maps主要为scssscript函数服务，如map-get函数用于查找键值，map-merge函数用于map和新加的键值融合，@each命令可添加样式到一个map中的每个键值对。Maps可用于任何Lists可用的地方，在List函数中Map会被自动转换为List。

运算

所有数据类型均支持相等运算==或!=，此外，每种数据类型也有其各自支持的运算方式。

数字运算

SassScript支持数字的加减乘除、取整等运算(+, -, *, /, %)，如果必要会在不同单位间转换值。

p {
  width: 1in + 8pt;
}

编译为

p {
  width: 1.111in; }

关系运算<, >, <=, >=也可用于数字运算，相等运算==, !=可用于所有数据类型。

/在CSS中通常起到分隔数字的用途，SassScript作为CSS语言的拓展当然也支持这个功能，同时也赋予了/除法运算的功能。也就是说，如果/在SassScript中把两个数组分隔，编译后的CSS文件中也是同样的作用。

以下三种情况/将被视为除法运算符号：

• 如果值，或值得一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算术表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果需要使用变量，同时又要确保/不做除法运算而是完整地编译到CSS文件中，只需使用#{}插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; }

颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

计算01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {
  color: #050709; }

使用color functions比计算颜色值更方便一些。
数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如：

p {
  color: #010203 * 2;
}

计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为

p {
  color: #020406; }

需要注意的是，如果颜色值包含alpha channel（rgba 或 hsla两种颜色值），必须拥有相等的alpha值才能进行运算，因为算术运算不会作用于alpha值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译为

p {
  color: rgba(255,255,0,0.75)
}

颜色值的alpha channel可以通过opacity或transparentize两个函数进行调整。

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

编译为

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

IE滤镜要求所有的颜色值包含alpha层，而且格式必须固定#AABBCCDD，使用ie_hex_str函数可以很容易地将颜色转换为IE滤镜要求的格式。

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

编译为

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

字符串运算

+可用于连接字符串

p {
  cursor: e + -resize;
}

编译为

p {
  cursor: e-resize; }

注意，如果有引号字符串(位于+左侧)连接无引号字符串，运算结果是有引号的，相反，无引号字符串(位于+左侧)连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}

编译为

p {
  margin: 7px auto; 
}

在有引号的文本字符串中使用#{}插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

编译为

p:before {
  content: "I ate 15 pies!"; }

空的值被视作插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

编译为

p:before {
  content: "I ate pies!"; }

布尔运算(Boolean Operations)

SassScript支持布尔型的and or以及not运算。

数组运算(List Operations)

数组不支持任何运算方式，只能使用list functions控制。

圆括号

圆括号可以用来影响运算的顺序：

p {
  width: 1em + (2em * 3);
}

编译为

p { width: 7em; }

函数

SassScript定义了多种函数，有些甚至可以通过普通的CSS语句调用：

p {
  color: hsl(0, 100%, 50%);
}

编译为

p { color: #ff0000; }

关键词参数

Sass函数允许使用关键词参数，上面的例子也可以写成：

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以缺省，另外，参数名被视为变量名，下划线、段横杠可以互换使用。

通过 Sass::Script::Functions 查看完整的 Sass 函数列表，参数名，以及如何自定义函数。

插值语句#{}

通过#{}插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }

#{}插值语句也可以在属性值中插入SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用#{}可以避免Sass运行运算表达式，直接编译CSS。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p { font: 12px/30px; }

& in SassScript

就像在选择器中使用&一样，在SassScript中引用当前父选择器。它是一个逗号分隔的列表，空格分隔的列表。例如：

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

如果没有父选择器，&的值将为null。这意味着可以在mixin中使用它来检测父选择器是否存在：

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

变量定义!default

可以在变量的结尾加!default给一个未通过!default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

编译为

#main {
  content: "First content";
  new-content: "First time reference"; }

变量是null空值时将视为未被!default赋值。

$content: null;
$content: "Non-null content" !default;
#main {
  content: $content;
}

编译为

#main {
  content: "Non-null content"; }

@-Rules与指令

Sass支持所有的CSS3@Rules，以及Sass特有的"指令"。更多资料请查看 控制指令 (control directives) 与 混合指令 (mixin directives) 两个部分。

@import

Sass拓展了@import的功能，允许其导入SCSS或Sass文件。被导入的文件将合并编译到同一个CSS文件中，另外，被导入的文件中所包含的变量或者混合指令都可以在导入的文件中使用。

通常，@import寻找Sass文件并将其导入，但在以下情况下，@import仅作为普通的CSS语句，不会导入任何Sass文件。

• 文件拓展名是.css；
• 文件名以http://开头；
• 文件名是url()；
• import包含media queries。

如果不在上述情况内，文件的拓展名是.scss或.sass，则导入成功。没有指定拓展名，Sass将会试着寻找文件名相同，扩展名为.scss或sass的文件并将其导入。

@import "foo.scss";

或

@import "foo";

都会导入文件foo.scss，但是

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

编译为

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Sass允许同时导入多个文件，例如同时导入rounded-corners与text-shadow两个文件：

@import "rounded-corners", "text-shadow";

嵌套@import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用@import，其实，也可以将@import嵌套进CSS样式或者@media中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套层的层中。

假设example.scss文件包含以下样式：

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}

不可以在混合指令或控制指令中嵌套@import

@media

Sass中@media指令与CSS中用法一样，只是增加了一点额外的功能：允许其在CSS规则中嵌套。如果@media嵌套在CSS规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器。这个功能让@media用起来更方便，不需要重复使用选择器，也不会打乱CSS的书写流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media的quiries允许互相嵌套使用，编译时，Sass自动添加and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

@media甚至可以使用SassScript（比如变量、函数，以及运算符）代替条件的名称或者值：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译为

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在HTML中给元素定义两个class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

样式如下

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

麻烦的是，这样做必须时刻记住使用.seriousError时需要参考.error的样式，带来了很多不便。使用@extend可以避免上述情况，告诉Sass将一个选择器下的所有样式集成给另一个选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

上面代码的意思是将.error下的所有样式继承给.seriousError，border-width: 3px；是单独给.seriousError设定特殊样式，这样，使用.seriousError的地方可以不再使用.error。

其他使用到.error的样式也会同样继承给.seriousError，例如，另一个样式.error.instrusion使用了hacked.png做背景，<div class="seriousError instrusion"></div>也同样会使用hack.png的背景。

.error.intrusion {
  background-image: url("/image/hacked.png");
}

How it Works

@extends的作用是将重复使用的样式(.error)延申(extend)给需要包含这个样式的特殊样式(.seriousError)，刚刚的例子：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

当合并选择器时，@extend会很聪明地避免无谓的重复，seriousError.seriousError将编译为.seriousError，不能匹配任何元素的选择器(比如#main#footer)也会删除。

延申复杂的选择器

Class选择器并不是唯一可以被延申的，Sass允许延申任何定义给单个元素的选择器，比如.special.cool，a:hover或者a.user[href^="http://"]等，例如：

.hoverlink {
  @extend a:hover;
}

同class元素一样，a:hover的样式将继承给.hoverlink。

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译为

a:hover, .hoverlink {
  text-decoration: underline; }

与上面.error.instrusion的例子一样，所有a:hover的样式将继承给.hoverlink，包括其他使用到a:hover的样式，例如：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编译为

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多重延申

同一个选择器可以延申给多个选择器，它所包含的属性将继承给所有被延申的选择器：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

编译为

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

每个.seriousError将包含.error与.attention下的所有样式，这时，后定义的样式享有优先权：.seriousError的背景颜色是#ff0而不是#fdd，因为.attention在.error之后定义。

多重延申可以使用逗号分隔选择器名，比如@extend .error, .attention与@extend .error; @extend.attention有相同的效果。

继续延申

当一个选择器延申给第二个后，可以继续将第二个选择器延申给第三个，例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

现在，每个.seriousError选择器将包含.error的样式，而.criticalError不仅包含.seriousError的样式也会同时包含.error的所有样式，上面的代码编译为：

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

选择器列

暂时不可以将选择器列，比如.foo .bar或.foo + .bar，延申给其他元素，但是，却可以将其他元素延申给选择器列：

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

编译为

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

合并选择器列

有时会遇到复杂的情况，比如选择器列中的某个元素需要延申给另一个选择器列，这种情况下，两个选择器列需要合并，比如：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

技术上讲能够生成所有匹配条件的结果，但是这样生成的样式表太复杂了，上面这个简单的例子就可能有10种结果。所以，Sass只会编译输出有用的选择器。

当两个列合并时，如果没有包含相同的选择器，将生成两个新选择器；第一列出现在第二列之前，或者第二列出现在第一列之前：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

编译为

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

如果两个列包含了相同的选择器，相同部分将会合并在一起，其他部分交替输出。在下面的例子里，两个列都包含#admin，输出结果种它们合并在了一起：

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

编译为

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

@extend-Only选择器

有时，需要定义一套样式并不是给某个元素用，而是只通过@extend指令使用，尤其是在制作Sass杨式库的时候，希望Sass能够忽略用不到的样式。

如果使用普通的CSS规则，最后会编译出很多用不到的样式，也容易与其他样式命名冲突，所以，Sass引入了"占位符选择器"，看起来很像普通的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; }

!optional声明

如果@extend失败会收到错误提示，比如，这样写a.important { @extend .notice }，当没有.notice选择器时，将会报错，只有h1.notice包含.notice时也会报错，因为h1与a冲突，会生成新的选择器。

如果要求@extend不生成新选择器，可以通过!optional声明达到这个目的，例如：

a.important {
  @extend .notice !optional;
}

在指令中延申

在指令中使用@extend时有一些限制：Sass不可以将@media层外的CSS规则延申给指令层内的CSS，这样会生成大量的无用代码。也就是说，如果在@media中使用@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;
  }
}

希望有一天，浏览器可以原生支持@extend指令，这样就可以在任何指令中使用延申功能，不再受限制了。

控制指令

SassScript提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令配合使用，尤其是在Compass等杨式库中。

@if

当 @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; }

@if声明后面可以跟多个@else if声明，或者一个@else声明。如果@if声明失败，Sass将逐条执行@else if声明，如果全部失败，最后执行@else声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译为

p {
  color: green; }

@for

@for指令可以在限制的范围内重复输出样式，每次按要求对输出结果做出变动。这个指令包含两种格式：@for $var from<start> through <end>，或者@for $var from <start> to <end>，区别在于through与to的含义：当使用through时，条件范围包含<start>与<end>的值，而使用to时条件范围只包含<start>的值不包含<end>的值。另外，$var可以是任何变量，比如$i；<start>和<end>必须是整数值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@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'); }

@while

@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）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

定义混合指令 @mixin (Defining a Mixin: @mixin)

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

引用混合样式 @include

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译为

a {
  color: blue;
  background-color: red; }

混合样式中也可以包含其他混合样式，比如

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。

参数

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@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; }

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  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 可以用 + 表示，所以上面的例子可以写成：

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

注意： 当 @content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

函数指令

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

$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 输出结果。
自定义的函数也可以使用关键词参数，上面的例子还可以这样写：

#sidebar { width: grid-width($n: 5); }

建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。

输出格式

Sass 默认的 CSS 输出格式很美观也能清晰反映文档结构，为满足其他需求 Sass 也提供了多种输出格式。

Sass 提供了四种输出格式，可以通过 :style option 选项设定，或者在命令行中使用 --style 选项。

:nested

Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded

Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}