Sass 中的 @ 規則

1、 @import

　　Sass 擴展了 CSS 的 @import 規則，讓它可以引入 SCSS 和 Sass 文件。 全部引入的 SCSS 和 Sass 文件都會被合併並輸出一個單一的 CSS 文件。 另外，被導入的文件中所定義的變量或 mixins 均可以在主文件中使用。
　　例如： @import "foo.scss";

2、 @extend 是用來擴展選擇器或佔位符。

3、 @at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層以後，想讓某個選擇器跳出，此時就能夠使用 @at-root。

　　示例:　　

 1 .a {
 2   color: red;
 3 
 4   .b {
 5     color: orange;
 6 
 7     .c {
 8       color: yellow;
 9 
10       @at-root .d {
11         color: green;
12       }
13     }
14   }  
15 }

　　輸出:

1 a {
2   color: red; }
3   .a .b {
4     color: orange; }
5     .a .b .c {
6       color: yellow; }
7       .d {
8         color: green; }

4、錯誤調試

　　@debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令以後，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug
　　@warn 和 @debug 功能相似，用來幫助咱們更好的調試 Sass。
　　@error 和 @warn、@debug 功能是一模一樣。