在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將只應用於上游鏈——即只擴展被導入的文件中的選擇器，而不是執行導入命令的文件。
- 所有導入的成員變量默認擁有命名空間
待續......
需要注意的是，如果我們使用的是node-sass，在webpack中使用sass-loader並不能編譯 @use ，只有dart-sass可以使用 @use
Reference