SCSS @import

我們知道原生CSS中存在@import命令，它可以引入一個外部CSS檔案。

不過對於此規則我們要謹慎使用，因為效率並不高，本文不做介紹，具體參閱CSS @import一章節。

SCSS也存在一個@import命令，不難猜測，它的功能也是與引入檔案有關。

一.命令基本用法：

當然在SCSS中，此命令用於引入SCSS檔案，首先介紹一下與原生CSS中的@import的區別。

（1）.原生CSS的@import命令有一個缺陷，它會造成多次HTTP請求，導致效率低下，因為是在解析執行CSS程式碼遇到此命令的時候，才會去下載此命名引入的檔案，很明顯這不夠優化，所以在實際應用中並不推薦使用。

（2）.SCSS中不用擔心上述問題，它雖然與CSS終使用方式比較類似，但是最終SCSS要編譯成一個目標CSS檔案，被引入的SCSS檔案中的CSS程式碼會被合併到目標CSS檔案中，所以不會產生一次額外的請求。

下面是是一副網路上的常見配圖，首先感謝一下原作者：

下面對上述圖示進行一下分析：

（1）.左側粉色的標識一個main.scss檔案。

（2）.上述檔案會一次引入三個scss檔案，也就是右側的三個檔案。

main.scss檔案匯入三個檔案程式碼片段如下：

[Scss] 純文字檢視 複製程式碼
@import "colors.scss";
@import "mixins.scss";
@import "grids.scss";

假設最終生成main.css檔案，此css檔案中的程式碼是四個scss檔案共同的產物。

也就是說，可以認為最終生成的css檔案中的程式碼是四個檔案程式碼遵循某種規則合併的產物。

匯入程式碼可以進行縮減，程式碼如下：

[Scss] 純文字檢視 複製程式碼
@import "colors";
@import "mixins";
@import "grids";

可以將scss檔案的副檔名省略掉。

二.刪減無用css檔案：

預設情況下，上述四個scss檔案會生成四個對應的scss檔案。

但是實際應用中，很有可能最終的目標檔案才是我們所需要的，其他三個被匯入的檔案生成的css檔案有點多餘。

scss已經對此問題給出瞭解決方案，考慮到篇幅問題本文不做介紹，具體參閱scss partial部分檔案一章節。

三.規則塊內匯入SCSS檔案：

SCSS的@import命名更加靈活一些，它還可以在規則塊內匯入外部檔案。

此種匯入方式下，生成對應css檔案時，區域性檔案會被直接插入到css規則內匯入它的地方。

假設我們有blue-theme.scss檔案，它的程式碼如下：

[Scss] 純文字檢視 複製程式碼
aside {
  background: blue;
  color: white;
}

下面將上述檔案匯入到另一個scss檔案指定的規則塊中，程式碼片段如下：

[Scss] 純文字檢視 複製程式碼
.blue-theme {@import "blue-theme"}

最終編譯成css程式碼如下：

[CSS] 純文字檢視 複製程式碼
.blue-theme aside {
  background: blue;
  color: #fff;
}

可以看到，被匯入檔案編譯成的CSS程式碼直接被插入到對應的位置。