輸入

我們假設以下場景： 你有兩個樣式表：_variables.scss 和 layout.scss。從邏輯上講，你將所有變數儲存在變數樣式表中，但希望從佈局樣式表中訪問它們。

注意： 你可能會注意到變數樣式表在其名稱前面有一個下劃線（’_’）。這是因為它是部分的 - 這意味著它將被匯入。

sass-lang.com 說以下關於 partials 的內容： 你可以建立包含很少 CSS 片段的部分 Sass 檔案，你可以將這些片段包含在其他 Sass 檔案中。這是模組化 CSS 並幫助保持易於維護的好方法。 […]下劃線讓 Sass 知道該檔案只是一個部分檔案，不應該生成一個 CSS 檔案。Sass partials 與 @import 指令一起使用。

SCSS 變數非常適合這種情況。讓我們假設你的 _variables.scss 看起來像這樣：

$primary-color: #333;

你可以使用 @import 匯入它，然後使用引號將樣式表的名稱匯入。你的佈局樣式表現在可能如下所示（請注意匯入中沒有下劃線或副檔名）：

@import 'variables';
body {
  color: $primary-color;
}

這將輸出如下內容：

body {
  color: #333;
}