在Vue大行其道的今天，我們也受益匪淺，再次感謝@尤大。那麼在用Vue開發的過程中，我們大概率會用到Sass來提高我們前端的開發效率，為前端工程化做了很大貢獻，Sass本身具有很多令人興奮的功能，例如：variable、function、mixin、nested、module等，本文主要來研究module——CSS模組化。

我們在開發中最常用的模組化指令就是@import，後來新版本的 Sass 中摒棄了@import 並引入了一個新的指令 @use 來幫我們完成CSS的模組化，那我們就一個一個來研究~

@import

基本用法

Sass 拓展了@import的功能，允許其匯入 SCSS 或 Sass 檔案。被匯入的檔案將合併編譯到同一個 CSS 檔案中，另外，被匯入的檔案中所包含的變數或者混合指令 (mixin) 都可以在匯入的檔案中使用。

通常，@import尋找 Sass 檔案並將其匯入，但在以下情況下，@import僅作為普通的 CSS 語句，不會匯入任何 Sass 檔案。

• 檔案拓展名是.css；
• 檔名以http://開頭；
• 檔名是url()；
• @import包含 media queries。

如果不在上述情況內，檔案的拓展名是.scss或.sass，則匯入成功。沒有指定拓展名，Sass 將會試著尋找檔名相同，拓展名為.scss或.sass的檔案並將其匯入。

@import "foo.scss";

或

@import "foo";

都會匯入檔案 foo.scss，但是

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

編譯為

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Sass 允許同時匯入多個檔案，例如同時匯入 rounded-corners 與 text-shadow 兩個檔案：

@import "rounded-corners", "text-shadow";

匯入檔案也可以使用#{ }插值語句，但不是通過變數動態匯入 Sass 檔案，只能作用於 CSS 的url()匯入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

編譯為

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

它的缺點

• 很容和原生CSS中的@import混淆；
• 效能略差（待考究）；
• 沒有名稱空間，多個模組相同名稱的變數或方法會被覆蓋；
• 無法直接看出變數或方法的宿主模組；

@use

和@import用法類似

@use"foo.scss";

當然，他們之間有明顯差別

• 該檔案只匯入一次，不管在專案中@use它多少次。
• 以下劃線(_)或連字元(-)開頭的變數、mixin和函式(Sass稱為"成員變數")被認為是私有的，不會被匯入。
• 匯入的檔案（這裡即buttons.scss）中的成員變數只在區域性可用，而不會傳遞到未來的匯入結果中。
• 類似地，@extends將只應用於上游鏈——即只擴充套件被匯入的檔案中的選擇器，而不是執行匯入命令的檔案。
• 所有匯入的成員變數預設擁有名稱空間

待續......

Reference

• Introducing Sass Modules

• Sass官方文件

• Sass翻譯文件