Sass(SCSS)中文手册——语法

大纲

1、嵌套规则(Nested Rules)
2、父选择符： &
3、嵌套属性
4、SassScript
5、@ 规则和指令
6、控制指令(Control Directives)
7、Mixin Directives
8、Function Directives

1、嵌套规则(Nested Rules)

Sass允许CSS规则相互嵌套。内部规则只应用于外部规则的选择器。
这有助于避免重复父选择器，并使具有许多嵌套选择器的复杂CSS布局更加简单。

#main {
  width: 97%;
  p,
  div {
    font-size: 2em;
    a {
      font-weight: bold;
    }
  }
  pre {
    font-size: 3em;
  }
}
/*
    scss编译为：css语法
*/
#main {
  width: 97%;
}
#main p,
#main div {
  font-size: 2em;
}
#main p a,
#main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

2、父选择符： &

当选择器拥有某种特殊效果(如悬停)或者父选择器有特定类的时候，需要对这些情况设置某种样式，在这些情况下，可以使用&字符显式指定应该插入父选择器的位置。
& 在编译时将被替换为父选择符，输出到 CSS 中。 也就是说，如果你有一个深层嵌套的规则，父选择符也会在 & 被替换之前被完整的解析。

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}
/*
    编译为
*/
#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}

3、嵌套属性

CSS有相当多的属性位于“名称空间”中;
例如，font-family、font-size和font-weight都位于font(字体)名称空间中。
在CSS中，如果想在相同的名称空间中设置一些属性，每次都必须键入它。Sass为此提供了一个快捷方式:只需编写一次名称空间，然后在其中嵌套每个子属性。

/*
    scss
*/
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*
    编译为：
*/
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

4、SassScript

除了普通的CSS属性语法，Sass还支持一组名为SassScript的扩展。

SassScript允许属性使用变量、算术和其他函数。SassScript可以用于任何属性值。
SassScript还可以用来生成选择器和属性名，这在编写mixin时非常有用。这是通过插值来实现的。

4.1、算术

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

4.2、Variables(变量): $

/*
    使用SassScript最直接的方法是使用变量。变量以美元符号开头，设置类似CSS属性
*/
$width: 5em;
/*
    然后你可以在属性中引用它们:
*/
#main {
  width: $width;
}
/*
    变量只能在定义变量的嵌套选择器级别内可用。如果它们是在任何嵌套选择器之外定义的，
那么它们在任何地方都是可用的。
*/

4.3、函数

/*
    SassScript 定义了一些有用的函数， 这些函数可以像普通 CSS 函数语法一样被调用：
*/
p {
  color: hsl(0, 100%, 50%);
}
/*
    被编译为：
*/
p {
  color: #ff0000;
}
/*
    关键词参数:
        Sass 函数允许指定明确的关键词参数 (keyword arguments) 进行调用。 
        虽然不够简明，但可以让样式表阅读起来会更方便。 关键词参数让函数具有更灵活的接口，
即便参数众多，也不会让使用变得困难。
        命名参数（named arguments）可以以任意顺序传入，并且，具有默认值的参数可以省略掉。 
由于命名参数也是变量名称，因此，下划线、短横线可以交换使用。
*/
/*
    上面的例子也可以写成：
*/
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

4.4、Interpolation(插值): #{}

/*
    可以在选择器和属性名中使用SassScript变量，使用#{}插值语法:
*/
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/*
    被编译为：
*/
p.foo {
  border-color: blue;
}

4.5、变量默认值： !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";
}

5、@ 规则和指令

Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。 这些规则在 Sass 中具有不同的功效。

5.1、@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：
i：如果文件的扩展名是 .css。
ii：如果文件名以 http:// 开头。
iii：如果文件名是 url()。
iv：如果 @import 包含了任何媒体查询（media queries）。
如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

/*
    两者都将引入 foo.scss 文件
*/
@import "foo.scss";
@import "foo";

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

/*
    也可以通过一个 @import 引入多个文件。
*/
@import "rounded-corners", "text-shadow";
/*
    将引入 rounded-corners 和 text-shadow 两个文件。
*/

5.2、片段

如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。

/*
    例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了 
    而且你还可以这样做：
*/
@import "colors";
/*
    来引入 _colors.scss 文件。
*/

注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。

5.3、嵌套 @import

虽然大部分时间只需在顶层文件使用 @import 就行了， 但是，你还可以把他们包含在 CSS 规则 和 @media 规则中。

/*example.scss*/
.example {
  color: red;
}
/* use */
#main {
  @import "example";
}
/* 编译为 */
#main .example {
  color: red;
}

5.4、@media

Sass中的@media指令就像普通CSS中的指令一样，有一个额外的功能:它们可以嵌套在CSS规则中。如果@media指令出现在CSS规则中，它将冒泡到样式表的顶层，将所有选择器放到规则中。这使得添加特定于媒体的样式变得很容易，而无需重复选择器或中断样式表的流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
  .header {
    width: 300px;
    @media screen and (orientation: landscape) {
      width: 500px;
    }
  }
}
/* 编译为： */
.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}
.sidebar .header {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar .header {
    width: 500px;
  }
}

@media查询也可以相互嵌套。然后将使用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;
  }
}

5.5、@extend

在设计页面时，经常会遇到这样的情况:一个类应该拥有另一个类的所有样式，以及它自己的特定样式。处理这个问题最常见的方法是在HTML中使用更通用的类和更特定的类。

/*
  例如，假设我们有一个针对正常错误和严重错误的设计。我们可以这样写我们的标记:
*/
<div class="error seriousError">
  Oh no! You've been hacked!
</div>

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
/*
    不幸的是，这意味着我们必须始终记住在. seriouserror中使用.error。这是一个维护负担，
会导致一些棘手的bug，并可能将非语义样式的关注点引入标记。

    @extend指令通过告诉Sass一个选择器应该继承另一个选择器的样式来避免这些问题。
*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
/* 编译为： */
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

/*
    这意味着，除了. seriouserror特有的样式外，为.error定义的所有样式也应用于. seriouserror
实际上，每个拥有类. seriouserror的元素都有类.error。
*/
.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;
}

5.5.1、复杂选择器的继承(Extending Complex Selectors)

/*
    类选择器不是惟一可以扩展的东西。可以扩展只涉及单个元素的任何选择器，
例如 .special.cool, a:hover, or a.user[href^="http://"]
*/
.hoverlink {
  @extend a:hover;
}
/*
    与类一样，这意味着为a:hover定义的所有样式也应用于.hoverlink。
*/
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
/* 被编译为： */
a:hover, .hoverlink {
  text-decoration: underline;
}

/*
    就像上面的.error.intrusion一样，任何使用:hover的规则也适用于.hoverlink，
即使它们也有其他选择器。
*/
.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
/* 被编译为： */
.comment a.user:hover,
.comment .user.hoverlink {
  font-weight: bold;
}

5.5.2、多继承(Multiple Extends)

/*
    单个选择器可以扩展多个选择器。这意味着它继承了所有扩展选择器的样式。
*/
.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相同。
*/

5.5.3、链接扩展(Chaining Extends)

/*
    一个选择器可以扩展另一个选择器，而另一个选择器又可以扩展第三个选择器。
*/
.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%;
}

/* 编译为：*/
.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%;
}

5.5.4、选择器序列(Selector Sequences)

/*
    选择器序列，例如.foo .bar或.foo + .bar，目前无法扩展。
但是，嵌套选择器本身也可以使用@extend。
*/
#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;
}

5.5.5、合并选择序列

有时选择器序列会扩展另一个序列中出现的另一个选择器。在这种情况下，这两个序列需要合并。
虽然在技术上可以生成所有可能匹配这两个序列的选择器，但是这会使样式表太大。例如，上面的简单示例需要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;
}

/*
    如果两个序列确实共享一些选择器，那么这些选择器将合并在一起，只有差异(如果仍然存在的话)
将交替出现。在本例中，两个序列都包含id #admin，因此生成的选择器将合并这两个id:
*/
#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;
}

5.5.6、只继承选择器(@extend-Only Selectors)

有时候，您会为一个类编写样式，而这个类只需要@extend，而不需要直接在HTML中使用。在编写Sass库时尤其如此，如果用户需要，您可以为他们提供@extend样式，如果用户不需要，您可以忽略。
如果为此使用普通类，那么在生成样式表时就会创建许多额外的CSS，并有可能与HTML中使用的其他类发生冲突。这就是为什么Sass支持“占位符选择器”(例如%foo)。
占位符选择器看起来像类和id选择器，除了 # or . 替换为%。它们可以在类或id可以使用的任何地方使用，并且它们本身可以防止规则集被呈现到CSS。

/* This ruleset won't be rendered on its own. */
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
/*
    但是，占位符选择器可以扩展，就像类和id一样。将生成扩展的选择器，
但不会生成基本占位符选择器。
*/
.notice {
  @extend %extreme;
}
/*
    以上单独存在没有效果,Sass也不会编译出来,只有两者共同存在才会进行编译,
    简单的理解就是：类notice继承了#context a的类,或者可以理解为notice在#context a的基础上
扩展
*/
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

5.5.7、可选标志(The !optional Flag)

通常在扩展选择器时，如果@extend不起作用，就会出现错误。例如，如果你写a.important{@extend .notice}，如果没有包含.notice的选择器，这是一个错误。如果唯一包含.notice的选择器是h1，这也是一个错误。注意，由于h1与a冲突，因此不会生成新的选择器。
但是，有时您希望允许@extend不产生任何新的选择器。为此，只需在选择器之后添加!optional标志。

// 不加 !optional 会报错
a.important {
  @extend .notice !optional;
}

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

h1.notice {
  color: red;
}
/* 编译为*/
h1.notice {
  color: red;
}
// 注意.notice是h1标签上的，与下面的代码是有区别的
a.important {
  @extend .notice!optional;
}
h1 .notice {
  color: red;
}
/* 编译为：*/
h1 .notice, h1 a.important {
  color: red;
}

5.5.8、指令中的继承(@extend in Directives)

在@media等指令中使用@extend有一些限制。Sass无法使@media块之外的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;
  }
}

5.6、@debug

@debug指令将SassScript表达式的值打印到标准错误输出流。它对于调试具有复杂SassScript的Sass文件非常有用。

@debug 10em + 12em;
/* outputs: */
Line 1 DEBUG: 22em

5.7、@warn

@warn指令将SassScript表达式的值打印到标准错误输出流。对于需要提醒用户注意弃用或从轻微混合使用错误中恢复的库，它非常有用。@warn和@debug之间有两个主要区别:
1、您可以使用 ——quiet命令行选项或:quiet Sass选项关闭警告。
2、样式表跟踪将与消息一起打印出来，以便被警告的用户可以看到他们的样式在哪里引起警告。

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

6、控制指令(Control Directives)

SassScript支持基本的控制指令，用于只在某些条件下包含样式，或者多次包含相同的样式，并带有变体。
注意，控制指令是一个高级特性，在日常样式化过程中不推荐使用。它们主要用于mixin中，特别是那些属于Compass这样的库的部分，因此需要很大的灵活性。

6.1、@if

/*
    @if指令使用SassScript表达式，如果表达式返回的不是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语句失败，则按顺序尝试@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;
}

6.2、@for

/*
    for指令重复输出一组样式。对于每个重复项，计数器变量用于调整输出。
    这个指令有两种形式:@for $var，从<start>到<end>; @for $var，从<start>到<end>。
    注意关键字through和to的区别。
    $var可以是任何变量名，比如$i;
    <start>和<end>是应该返回整数的SassScript表达式。

    @for语句将$var设置为指定范围内的每个连续数字，每次使用$var的值输出嵌套样式。
    对于from ... through，范围包括<start>和<end>的值，
    但是from ... to，范围运行到但不包括<end>的值。
*/
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
/* 编译为 */
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

6.3、@each

/*
    $var可以是任何变量名，比如$length或$name，它是一个返回列表的SassScript表达式。

    @each规则将$var设置为列表中的每个项目，然后使用$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");
}

6.4、@while

/*
    while指令接受一个SassScript表达式并重复输出嵌套样式，直到语句计算为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;
}

7、Mixin Directives

mixin允许您定义可以在整个样式表中重用的样式，而不需要求助于.float-left之类的非语义类。mixin还可以包含完整的CSS规则，以及Sass文档中其他任何允许的内容。它们甚至可以使用参数，允许您使用非常少的混合创建各种风格。

7.1、定义一个Mixin:Defining a Mixin: @mixin

/*
    mixin是用@mixin指令定义的。后面是mixin的名称和可选的参数，以及包含mixin内容的块。
例如，large-text Mixin的定义如下:
*/
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

/*
    mixin也可能包含选择器，可能与属性混合。选择器甚至可以包含父引用。例如:
*/
@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & {
    height: 1px;
  }
}

7.2、引入一个Mixin：Including a Mixin: @include

/*
    mixin包含在带有@include指令的文档中。它接受mixin的名称和可选的参数，
并将由mixin定义的样式包含到当前规则中。例如:
*/
.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不直接定义任何属性或使用任何父引用，
它也可以包含在任何规则之外(即在文档的根目录下)。例如:
*/
@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;
/* 编译为 */
a {
  color: blue;
  background-color: red;
}
/*
    Mixin定义还可以包括其他Mixin。例如:
*/
@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
/*
    Mixin不得直接或间接地包括其本身。也就是说，mixin递归是禁止的。

    仅定义派生选择器的mixin可以安全地混合到文档的最顶层。
*/

7.3、参数：Arguments

/*
    mixin可以将参数SassScript值作为参数，这些参数在包含mixin时给出，
并在mixin中作为变量提供。

    在定义mixin时，参数被写成由逗号分隔的变量名，所有参数都放在名称后面的括号中。然后，
在包含mixin时，可以以相同的方式传入值。例如:
*/
@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还可以使用常规的变量设置语法为其参数指定默认值。然后，当包含mixin时，
如果它没有传入该参数，则将使用默认值。例如:
*/
@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;
}

/*
    关键字参数

    还可以使用显式关键字参数包含mixin。例如，我们上面的例子可以写成:
*/
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border($color: blue);
}
h1 {
  @include sexy-border($color: blue, $width: 2in);
}
/*
    虽然这不够简洁，但可以使样式表更易于阅读。它还允许函数提供更灵活的接口，
提供许多参数，而不会变得难以调用。
    命名参数可以按任何顺序传递，具有默认值的参数可以省略。
由于命名参数是变量名，下划线和破折号可以互换使用。
*/

7.4、变量参数

/*
    有时mixin接受数量未知的参数是有意义的。例如，用于创建框阴影的mixin可以将任意数量的阴影
作为参数。对于这些情况，Sass支持“变量参数”，它是mixin声明末尾的参数，它将所有剩余的参数打包
成一个列表。这些参数看起来会像正常的参数一样，只要这些参数以...为结尾，例如:
*/
@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);
}
/* 编译为： */
.shadows {
  -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;
}

/*
    在调用mixin时也可以使用变量参数。使用相同的语法，您可以展开一个值列表，
以便将每个值作为单独的参数传递。例如:
*/
@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;
}

/*
    您可以使用变量参数来包装mixin并添加其他样式，而无需更改mixin的参数签名。如果这样做，
甚至关键字参数也会传递到包装的mixin。例如:
*/
@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

7.5、将内容块传递给Mixin(Passing Content Blocks to a Mixin)

/*
    可以将一个样式块传递给mixin，以便将其放置在mixin包含的样式中。样式将出现在mixin中找到
的任何@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);
}

/*
    可以使用.sass简写语法进行相同的混合:
*/
=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)
/*
    注意:当@content指令不止一次指定或在循环中指定时，样式块将在每次调用时复制。
*/
/*
    可变范围和内容块

    传递给mixin的内容块是在定义该块的范围内计算的，而不是在mixin的范围内。
这意味着mixin的局部变量不能在传递的样式块中使用，变量将解析为全局值:
*/
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors {
    color: $color;
  }
}
/* 编译为：*/
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
/*
    此外，这清楚地表明，在传递的块中使用的变量和mixin与定义块的其他样式相关。例如:
*/
#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

8、Function Directives

/*
    可以在sass中定义自己的函数，并在任何值或脚本上下文中使用它们。例如:
*/
$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来设置函数的返回值。

    与mixin一样，您可以使用关键字参数调用sass定义的函数。在上面的例子中，
我们可以这样调用这个函数:
*/
#sidebar {
  width: grid-width($n: 5);
}
/*
    建议在函数前面加上前缀，以避免命名冲突，以便样式表的读者知道它们不是Sass或CSS的一部分。
例如，如果您为ACME Corp工作，您可能会将该函数命名为-acme-grid-width以上的函数。

    用户定义的函数也以与mixin相同的方式支持变量参数。
*/