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混淆；
• 性能略差（待考究）；
• 没有命名空间，多个模块相同名称的变量或方法会被覆盖；
• 无法直接看出变量或方法的宿主模块；

 

为了弥补已知问题，@import被更明确的@use和@forward规则所取代

@use

和@import用法类似

@use"foo.scss";

　　

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

• 该文件只导入一次，不管在项目中@use它多少次。
• 以下划线(_)或连字符(-)开头的变量、mixin 和函数(Sass称为"成员变量")被认为是私有的，不会被导入。
• 导入的文件（这里即buttons.scss）中的成员变量只在局部可用，而不会传递到未来的导入结果中。
• 类似地，@extends将只应用于上游链——即只扩展被导入的文件中的选择器，而不是执行导入命令的文件。
• 所有导入的成员变量默认拥有命名空间

待续......

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

Reference

• Introducing Sass Modules

• Using @use With Sass and Webpack

• CSS Modules

• Sass官方文档

• Sass翻译文档