Sass 導入

1. 前言

在 CSS 中我們可以通過 @import 來導入一個樣式文件，Sass 擴展了 CSS 的 @import 規則，使得可以導入 CSS 后綴的樣式文件和 Scss 后綴的樣式文件，并且提供了對 mixin 、函數和變量的訪問。

與 CSS 的 @import 不同的是， CSS 使用 @import 導入文件是在頁面渲染的時候發起多個 http 請求來獲取文件內容，而 Sass 的導入 @import 是在編譯時獲取文件內容導入的。

2. 語法詳情

Sass 的導入和 CSS 中的導入語法類似，只不過在 Sass 中可以導入用逗號分隔的多個文件， 我們舉個例子看下：

@import 'a.scss', 'b.scss';

上面的代碼意思是導入 a.scss 和 b.scss 文件，那么導入后 a 和 b 中的任何mixin 、函數和變量都是可以使用的。

我們知道在 CSS 中也有 @import 語句，在以下幾種情況 Sass 會認為 @import 是 CSS 語句：

• 使用 url()
• 文件的擴展名是 .css
• @import 包含 media queries
• 文件名以 http:// 開頭

在使用的時候要注意上面的幾種情況，如果導入的擴展名是 .scss 或 .sass 那么肯定用的是 Sass 提供的 @import 。如果導入文件沒有指定文件擴展名，那么 Sass 會嘗試尋找文件名相同的擴展名為 .sass 或 .scss 的文件。

2.1 加載路徑

Sass 允許我們自行提供文件的加載路徑，在我們導入文件的時候，Sass 總是會相對于當前文件進行解析，如果沒有加載到則會使用加載路徑。假如我們將加載路徑設置為 node_modules/public/sass ，那么我們使用如下的導入方式：

@import 'a';

假如當前目錄下沒有 a.scss 文件，那么 Sass 就會去加載 node_modules/public/sass/a.scss ，這就是使用了加載路徑，不過這種方式我們在項目中極少應用，你只需要了解即可。

2.2 部分導入

什么是部分導入呢？ 我的理解是局部的使用導入，也就是說可以僅導入 Sass 或 Scss 文件，而不將它們編譯為 CSS， 那么應該怎么做呢？假如我要導入一個 my.scss 文件，我不希望將它編譯為 CSS ，那么需要使用下劃線開頭的文件名，也就是說需要改名為 _my.scss ，然后使用如下導入代碼：

@import 'my';

上面的代碼導入的就是 _my.scss 文件，并且不會將它編譯為 CSS 。另外需要注意的是：不可以同時存在帶有下劃線和不帶下劃線的同名文件！

2.3 索引文件

在 Sass 中什么是索引文件呢？_index.scss 文件，那它有什么用呢？假如我有一個 my 目錄，這個目錄下有兩個文件，一個是 a.scss 一個是 _index.scss ，那么我使用如下文件導入代碼：

@import 'my'；

那么上面的代碼導入的就是 _index.scss 文件，也就是說 _index.scss 是這個目錄下的默認文件，這就想你在寫 vue 或者 html 中目錄下的 index 文件類似。

2.4 導入 CSS

Sass 也可以直接導入一個 CSS 文件，要注意的是，在導入的 CSS 文件中不允許有任何 Sass 的特性和語法，如果有的話將會報錯！導入的 CSS 文件會按照原有的樣子呈現。

2.5 嵌套導入

Sass 允許在樣式表中嵌入 @import，使用這種方式的話，以下劃線開頭的文件內容將會被直接插入到使用 @import 的位置，我們舉個例子看下：

// _a.scss
. item {
	width: 100px;
	height: 200px;
}

下面我將在 style.scss 中導入上面的 _a.scss 文件：

// style.scss
.box {
	@import '_a.scss';
}

上面的 style.scss 中的內容將會被編譯為如下的 CSS 代碼：

.box {
	.item {
		width: 100px;
		height: 200px;
	}
}

上面這種用法就是嵌套導入，它不是很常用，我在這里列出來你了解一下就可以。

3. 使用 @use 替代 @import

Sass 官方團隊不鼓勵使用 @import 導入，并且在未來幾年將逐步淘汰它，并最終將 @import 從 Sass 中完全刪除。所以使用 @use 是官方團隊更推薦的方式，下面我們開始講解使用 @use 導入。

@use 與 @import 的語法基本相同，我們先看一個簡單的使用 @use 導入的例子：

@use 'my/a.scss';
@use 'my/b';

從上面的代碼中可以看到其使用方式與 @import 是相同的，那么為什么還要替換掉 @import 呢？ 主要是以下幾個原因你需要了解下：

• @import 會使得所有變量、mixin 和函數都可以全局訪問，這使開發者很難去維護這些定義的東西。
• 因為所有的都是全局的，那么 Sass 必須為所有的成員添加前綴，以避免命名沖突。
• @extend 也是全局的，這樣將很難預測哪些樣式將被擴展。
• 每次使用 @import 時，每個樣式表都會被執行，這會增加編譯時間
• 無法定義下游樣式表無法訪問的私有成員。

基于上述的這些原因，Sass 官方團隊將會逐漸淘汰 @import，可以使用 @use 替代，語法是相同的，所以我們在 v4.x.x 及以上的版本中盡量使用 @use 來導入。

4. 實戰經驗

其實在實際的項目中我們一般就是用 @import 來簡單的導入文件，更多的時候是用它來方便整個項目中的 Sass 樣式管理，如下圖所示：

圖中所演示的是我的項目中的一個使用方式。每個項目的樣式管理方式都不同，你的公司中的項目中肯定也會使用 @import 或 @use 來管理樣式文件，不過目前應該是使用 @import 的居多，這個功能其實很簡單也沒有太多的說法，在你的項目中需要你靈活的使用它，當然，慢慢的使用 @use 去替換掉它也是非常重要的！

5. 小結

本節內容我們講解了 Sass 中的導入 @import，這在 CSS 中也是有這個功能的，這個功能我們可以理解就是導入文件中的內容的，一般在項目中我們也是用它來操作文件而已，只不過需要了解它在四種情況下會被認為是 CSS 的 @import 語法，如果忘記了是哪四種情況，往前翻一翻。

還有需要注意的是，Sass 官方推薦使用 @use 來替代 @import 使用，所以我們在導入的時候盡量使用 @use，如果你的項目中已經大量的使用了 @import （這是目前很常見的現狀），可以找個時機替換掉，不過一定要確保 Sass 的版本是 v4.x.x 及以上！