Sass 導(dǎo)入

1. 前言

在 CSS 中我們可以通過 @import 來導(dǎo)入一個(gè)樣式文件，Sass 擴(kuò)展了 CSS 的 @import 規(guī)則，使得可以導(dǎo)入 CSS 后綴的樣式文件和 Scss 后綴的樣式文件，并且提供了對(duì) mixin 、函數(shù)和變量的訪問。

與 CSS 的 @import 不同的是， CSS 使用 @import 導(dǎo)入文件是在頁面渲染的時(shí)候發(fā)起多個(gè) http 請(qǐng)求來獲取文件內(nèi)容，而 Sass 的導(dǎo)入 @import 是在編譯時(shí)獲取文件內(nèi)容導(dǎo)入的。

2. 語法詳情

Sass 的導(dǎo)入和 CSS 中的導(dǎo)入語法類似，只不過在 Sass 中可以導(dǎo)入用逗號(hào)分隔的多個(gè)文件， 我們舉個(gè)例子看下：

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

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

我們知道在 CSS 中也有 @import 語句，在以下幾種情況 Sass 會(huì)認(rèn)為 @import 是 CSS 語句：

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

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

2.1 加載路徑

Sass 允許我們自行提供文件的加載路徑，在我們導(dǎo)入文件的時(shí)候，Sass 總是會(huì)相對(duì)于當(dāng)前文件進(jìn)行解析，如果沒有加載到則會(huì)使用加載路徑。假如我們將加載路徑設(shè)置為 node_modules/public/sass ，那么我們使用如下的導(dǎo)入方式：

@import 'a';

假如當(dāng)前目錄下沒有 a.scss 文件，那么 Sass 就會(huì)去加載 node_modules/public/sass/a.scss ，這就是使用了加載路徑，不過這種方式我們?cè)陧?xiàng)目中極少應(yīng)用，你只需要了解即可。

2.2 部分導(dǎo)入

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

@import 'my';

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

2.3 索引文件

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

@import 'my'；

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

2.4 導(dǎo)入 CSS

Sass 也可以直接導(dǎo)入一個(gè) CSS 文件，要注意的是，在導(dǎo)入的 CSS 文件中不允許有任何 Sass 的特性和語法，如果有的話將會(huì)報(bào)錯(cuò)！導(dǎo)入的 CSS 文件會(huì)按照原有的樣子呈現(xiàn)。

2.5 嵌套導(dǎo)入

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

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

下面我將在 style.scss 中導(dǎo)入上面的 _a.scss 文件：

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

上面的 style.scss 中的內(nèi)容將會(huì)被編譯為如下的 CSS 代碼：

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

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

3. 使用 @use 替代 @import

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

@use 與 @import 的語法基本相同，我們先看一個(gè)簡(jiǎn)單的使用 @use 導(dǎo)入的例子：

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

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

• @import 會(huì)使得所有變量、mixin 和函數(shù)都可以全局訪問，這使開發(fā)者很難去維護(hù)這些定義的東西。
• 因?yàn)樗械亩际侨值?，那?Sass 必須為所有的成員添加前綴，以避免命名沖突。
• @extend 也是全局的，這樣將很難預(yù)測(cè)哪些樣式將被擴(kuò)展。
• 每次使用 @import 時(shí)，每個(gè)樣式表都會(huì)被執(zhí)行，這會(huì)增加編譯時(shí)間
• 無法定義下游樣式表無法訪問的私有成員。

基于上述的這些原因，Sass 官方團(tuán)隊(duì)將會(huì)逐漸淘汰 @import，可以使用 @use 替代，語法是相同的，所以我們?cè)?v4.x.x 及以上的版本中盡量使用 @use 來導(dǎo)入。

4. 實(shí)戰(zhàn)經(jīng)驗(yàn)

其實(shí)在實(shí)際的項(xiàng)目中我們一般就是用 @import 來簡(jiǎn)單的導(dǎo)入文件，更多的時(shí)候是用它來方便整個(gè)項(xiàng)目中的 Sass 樣式管理，如下圖所示：

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

5. 小結(jié)

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

還有需要注意的是，Sass 官方推薦使用 @use 來替代 @import 使用，所以我們?cè)趯?dǎo)入的時(shí)候盡量使用 @use，如果你的項(xiàng)目中已經(jīng)大量的使用了 @import （這是目前很常見的現(xiàn)狀），可以找個(gè)時(shí)機(jī)替換掉，不過一定要確保 Sass 的版本是 v4.x.x 及以上！