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 規則：

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

如果上述情況都沒有出現，并且擴展名是 .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;
}