Sass @import 和 Partials

Sass 可保持 CSS 代碼干燥（DRY，Don't Repeat Yourself，不要重復自己）。

編寫 DRY 代碼的一種方法是將相關代碼保存在單獨的文件中。

您可使用 CSS 片段創建小文件，并包含在其他 Sass 文件中。例如這類文件可以是：重置文件、變量、顏色、字體等。

Sass 文件導入

就像 CSS 一樣，Sass 也支持 @import 指令。

@import 指令允許您將一個文件的內容包含在另一個文件中。

由于性能問題，CSS @import 指令有一個主要的缺點；每次調用它時都會創建一個額外的 HTTP 請求。但是，Sass @import 指令將文件包含在 CSS 中；所以在運行時不需要額外的 HTTP 調用！

Sass 導入語法：

@import filename;

提示：您不需要指定文件擴展名，Sass 會自動假定您指的是 .sass 或 .scss 文件。您還可以導入 CSS 文件。@import 指令導入文件，然后可在主文件中使用導入文件中定義的任何變量或 mixin。

您可以在主文件中導入任意數量的文件：

實例

@import "variables";
@import "colors";
@import "reset";

讓我們看一個例子：假設我們有一個名為 "reset.scss" 的重置文件，它看起來是這樣的：

SCSS 語法 (reset.scss)：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

現在我們要將 "reset.scss" 文件導入到另一個名為 "standard.scss" 的文件中。

我們是這樣做的：一般是在文件頂部添加 @import 指令；這樣其內容將具有全局作用域：

SCSS 語法 (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

因此，當 "standard.css" 文件被轉譯時，CSS 將如下所示：

CSS 輸出：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials（局部文件）

默認情況下，Sass 直接轉譯所有 .scss 文件。但是，在導入文件時，您不需要文件被直接轉譯。

Sass 有一個機制：如果你用下劃線開始文件名，Sass 將不會轉譯它。以這種方式命名的文件在 Sass 中稱為 partials。

因此，partial Sass 文件使用前導下劃線命名：

Sass Partial 語法：

_filename;

下例顯示了名為 "_colors.scss" 的 partial Sass 文件。（此文件不會直接轉換為 "colors.css"）：

實例

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

現在，如果您導入該 partial 文件，請省略下劃線。Sass 的理解是它應該導入文件 "_colors.scss"：

實例

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}