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

@import

Sass 擴(kuò)展了 CSS 的 @import 規(guī)則，讓它能夠引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都會(huì)被合并并輸出一個(gè)單一的 CSS 文件。 另外，被導(dǎo)入的文件中所定義的變量或 mixins 都可以在主文件中使用。

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

@import 根據(jù)文件名引入。 默認(rèn)情況下，它會(huì)尋找 Sass 文件并直接引入， 但是，在少數(shù)幾種情況下，它會(huì)被編譯成 CSS 的 @import 規(guī)則：

• 如果文件的擴(kuò)展名是 .css。
• 如果文件名以 http:// 開頭。
• 如果文件名是 url()。
• 如果 @import 包含了任何媒體查詢（media queries）。

如果上述情況都沒有出現(xiàn)，并且擴(kuò)展名是 .scss 或 .sass， 該名稱的 Sass 或 SCSS 文件就會(huì)被引入。 如果沒有擴(kuò)展名， Sass 將試著找出具有 .scss 或 .sass 擴(kuò)展名的同名文件并將其引入。

例如：

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

也可以通過一個(gè) @import 引入多個(gè)文件。例如：

@import "rounded-corners", "text-shadow";

將引入 rounded-corners 和 text-shadow 兩個(gè)文件。

如果你有一個(gè) SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯為一個(gè) CSS 文件， 這時(shí)，你就可以在文件名前面加一個(gè)下劃線，就能避免被編譯。 這將告訴 Sass 不要把它編譯成 CSS 文件。 然后，你就可以像往常一樣引入這個(gè)文件了，而且還可以省略掉文件名前面的下劃線。

例如，你有一個(gè)文件叫做 _colors.scss。 這樣就不會(huì)生成 _colors.css 文件了， 而且你還可以這樣做：

@import "colors";//不用加下劃線

來引入 _colors.scss 文件。

注意，在同一個(gè)目錄不能同時(shí)存在帶下劃線和不帶下劃線的同名文件。 例如， _colors.scss 不能與 colors.scss 并存。

嵌套 @import

雖然大部分時(shí)間只需在頂層文件使用 @import 就行了， 但是，你還可以把他們包含在 CSS 規(guī)則 和 @media 規(guī)則中。

來看官網(wǎng)提供的一個(gè)簡單示例：

假設(shè)要引入的樣式文件`example.scss`文件中包含這樣的代碼：

.example {
  color: red;
}

然后這樣引用：

#main {
  @import "example";
}

編譯出來的 CSS：

#main .example {
  color: red;
}