Sass 支持 所有 CSS3 的 @ 规则 ， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。
Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件 。 所有引入的 SCSS 和 Sass 文件都会被 合并 并 输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的 变量 或 mixins 都可以在主文件中使用。
Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。
@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则： 如果文件的扩展名是 .css。 如果文件名以 http:// 开头。 如果文件名是 url()。 如果 @import 包含了任何媒体查询（media queries）。
如果上述情况都没有出现，并且扩展名是 .scss 或 .sass ， 该名称的 Sass 或 SCSS 文件就会被 引入 。 如果 没有扩展名 ， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。
例如：
1 @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);
也可以通过一个 @import 引入多个文件 。例如：
@import "rounded-corners", "text-shadow";
将引入 rounded-corners 和 text-shadow 两个文件。
有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个 下划线 ，就能 避免被编译 。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。
例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你还可以这样做：
@import "colors";//不用加下划线
来引入 _colors.scss 文件。
注意 :在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存 。
嵌套 @import
虽然大部分时间只需在顶层文件使用 @import 就行了， 但是，你还可以把他们包含在 CSS 规则 和 @media 规则中。
假设要引入的样式文件`example.scss`文件中包含这样的代码：
.example { color: red;} 然后这样引用：
#main { @import "example";} 编译出来的 CSS：
#main .example { color: red;}
@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能， 可以嵌套在 CSS 规则中。 有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例：
1 .sidebar {2 width: 300px;3 @media screen and (orientation: landscape) {4 width: 500px;5 }6 } 编译出来：
1 .sidebar {2 width: 300px; 3 }4 @media screen and (orientation: landscape) {5 .sidebar {6 width: 500px;7 }8 } @media 也可以嵌套 @media：
1 @media screen {2 .sidebar {3 @media (orientation: landscape) {4 width: 500px;5 }6 }7 } 此时编译出来：
1 @media screen and (orientation: landscape) {2 .sidebar {3 width: 500px; 4 } 5 } 在使用 @media 时，还可以使用插件 #{} :
1 $media: screen;2 $feature: -webkit-min-device-pixel-ratio;3 $value: 1.5;4 @media #{$media} and ($feature: $value) {5 .sidebar {6 width: 500px;7 }8 } 编译出来的 CSS：
1 @media screen and (-webkit-min-device-pixel-ratio: 1.5) {2 .sidebar {3 width: 500px;4 }5 }
@extend
Sass 中的 @extend 是用来 扩展选择器 或 占位符 。比如：
1 .error { 2 border: 1px #f00; 3 } 4 .error.intrusion { 5 background-image: url("/image/hacked.png"); 6 } 7 .seriousError { 8 @extend .error; 9 border-width: 3px;10 } 被编译为：
1 .error, .seriousError {2 border: 1px #f00;3 }4 .error.intrusion, .seriousError.intrusion {5 background-image: url("/image/hacked.png"); 6 }7 .seriousError {8 border-width: 3px; 9 } 扩展选择器：
@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]，例如：
1 .hoverlink {2 @extend a:hover;3 }4 a:hover {5 text-decoration: underline;6 } 编译出来：
1 a:hover, .hoverlink {2 text-decoration: underline;3 } 再来看一个复杂点的：
1 .hoverlink {2 @extend a:hover;3 }4 .comment a.user:hover {5 font-weight: bold;6 } 编译出来的CSS:
1 .comment a.user:hover, .comment .user.hoverlink {2 font-weight: bold;3 } 多个扩展
所设某个样式要继承多个地方的样式，那么可以使用 @extend 来继承多个选择器或占位符的样式
1 .error { 2 border: 1px #f00; 3 background-color: #fdd; 4 } 5 .attention { 6 font-size: 3em; 7 background-color: #ff0; 8 } 9 .seriousError {10 @extend .error;11 @extend .attention;12 border-width: 3px;13 } 编译出来的CSS:
1 .error, .seriousError { 2 border: 1px #f00; 3 background-color: #fdd; 4 } 5 .attention, .seriousError { 6 font-size: 3em; 7 background-color: #ff0; 8 } 9 .seriousError {10 border-width: 3px;11 } 扩展单一选择器
我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码：
1 #context a%extreme {2 color: blue;3 font-weight: bold;4 font-size: 2em;5 } 这段代码在不调用之前不产生任何代码，只有能过@extend调用之后才生成代码：
1 .notice {2 @extend %extreme;3 } 编译出来的CSS:
1 #context a.notice {2 color: blue;3 font-weight: bold;4 font-size: 2em;5 }
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让 某个选择器跳出 ，此时就 可以使用 @at-root 。来看一个简单的示例：
1 .a { 2 color: red; 3 .b { 4 color: orange; 5 .c { 6 color: yellow; 7 @at-root .d { 8 color: green; 9 }10 }11 } 12 } 编译出来的CSS
1 .a { 2 color: red; 3 } 4 .a .b { 5 color: orange; 6 } 7 .a .b .c { 8 color: yellow; 9 }10 .d {11 color: green;12 }
@debug
@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会 输出你设置的提示 Bug:
@debug 10em + 12em;
会 输出：
Line 1 DEBUG: 22em
@warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。如：
1 @mixin adjust-location($x, $y) { 2 @if unitless($x) { 3 @warn "Assuming #{$x} to be in pixels"; 4 $x: 1px * $x; 5 } 6 @if unitless($y) { 7 @warn "Assuming #{$y} to be in pixels"; 8 $y: 1px * $y; 9 }10 position: relative; left: $x; top: $y;11 }
1 @mixin adjust-location($x, $y) { 2 @if unitless($x) {//unitless是内置函数，判断数值是否有“单位” 3 @warn "Assuming #{$x} to be in pixels"; 4 $x: 1px * $x; 5 } 6 @if unitless($y) { 7 @warn "Assuming #{$y} to be in pixels"; 8 $y: 1px * $y; 9 }10 position: relative; left: $x; top: $y;11 }12 .botton{13 @include adjust-location(20px, 30);14 } 编译出来的CSS:
1 .botton {2 position: relative;3 left: 20px;4 top: 30px;5 }
@error
@error 和 @warn、@debug 功能是如出一辙。
1 @mixin error($x){ 2 @if $x 编译的时候：
你需要将15值设置在10以内的数 on line 7 at column 5
查看更多关于Sass@规则_html/css_WEB-ITnose的详细内容...