@import

Sass 支持所有CSS3 的@ 規則，以及一些Sass 專屬的規則，也被稱為“指令（directives）”。這些規則在Sass 中具有不同的功效，詳細解釋如下。

@import

Sass 擴展了CSS 的@import 規則，讓它能夠引入SCSS 和Sass 文件。所有引入的SCSS 和Sass 文件都會被合併並輸出一個單一的CSS 文件。另外，被導入的文件中所定義的變量或mixins 都可以在主文件中使用。

Sass 會在當前目錄下尋找其他Sass 文件，如果是Rack、Rails 或Merb 環境中則是Sass 文件目錄。也可以通過:load_paths 選項或者在命令行中使用--load-path 選項來指定額外的搜索目錄。

@import 根據文件名引入。默認情況下，它會尋找Sass 文件並直接引入，但是，在少數幾種情況下，它會被編譯成CSS 的@import 規則：

如果上述情況都沒有出現，並且擴展名是.scss 或.sass，該名稱的Sass 或SCSS 文件就會被引入。如果沒有擴展名， 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);

也可以通過一個@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;
}

5-1 @import