在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
