CSS（Sass）模块化

在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";

当然，他们之间有明显差别

待续......

需要注意的是，如果我们使用的是node-sass，在webpack中使用sass-loader并不能编译 @use ，只有dart-sass可以使用 @use

Reference

• Introducing Sass Modules

• Using @use With Sass and Webpack

• CSS Modules

• Sass官方文档

• Sass翻译文档