@import、@media、@extend

Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）。

@import

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

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

· 文件拓展名是 .css；

· 文件名以 http:// 开头；

· 文件名是 url()；

· @import 包含 media queries。

分音 (Partials)

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

嵌套 @import

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

@media

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

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

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

@extend

@extend 的作用是将重复使用的样式延伸 (extend) 给需要包含这个样式的特殊样式:

.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-Only 选择器 (@extend-Only Selectors)

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

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