SASS 中使用 @import 与 @use 指令的区别与优劣势-JavaScript中文网-JavaScript教程资源分享门户

SASS 是一种 CSS 预处理器，它允许我们在 CSS 中使用变量、嵌套规则、Mixin 等高级特性，使得我们可以更加轻松、高效地编写 CSS。在 SASS 中，有两个指令可以用来导入其他 SASS 文件：@import 和 @use。

@import 指令

@import 指令是最早出现的导入方式，它允许我们在一个 SASS 文件中引入另一个 SASS 文件：

@import 'reset';

在这个例子中，我们将在当前 SASS 文件中引入一个名为 'reset' 的 SASS 文件。这个导入方式支持相对路径和绝对路径两种方式。

@import 指令有一些优势和劣势，下面我们来一一说明。

引入顺序不可控。使用 @import 指令导入的 SASS 文件会被嵌套进当前 SASS 文件中，这导致了一个问题：如果多个 SASS 文件中都使用了相同的变量或 Mixin，那么这些变量或 Mixin 的值会被最后一个导入的文件覆盖，这可能导致样式出现异常。
性能低下。因为 @import 指令会将导入的文件合并进当前 SASS 文件中，所以一个 SASS 文件导入了太多的文件时，会导致编译速度变慢，而且生成的 CSS 文件也会变得很大，影响页面性能。

@use 指令是一个较新的导入方式，它在 SASS 3.7.0 中被引入。和 @import 指令相比，@use 指令拥有更多的特性，并且在性能上表现更优秀。

@use 指令的使用和 @import 有些类似，只需要在 SASS 文件中添加一个 @use 指令，并指定要引入的文件路径即可：

@use 'reset';

和 @import 一样，@use 指令也支持相对路径和绝对路径两种方式。

@use 指令的一个特别之处在于它支持为导入的文件指定别名。如果一个文件中定义了一个特别长的变量名，我们可以使用别名来简化调用：

@use 'utils' as u;

body {
  font-size: u.$default-font-size;
}

在上面的代码中，我们使用 @use 指令引入了一个名为 'utils' 的 SASS 文件，并将其别名为 'u'。这样，我们就可以在当前 SASS 文件中使用 'u.$default-font-size' 来调用 'utils' 文件中定义的 $default-font-size 变量。

@use 指令还支持命名空间，可以将导入的变量、Mixin、函数和其它规则都放在一个命名空间中，避免和当前 SASS 文件中定义的名称冲突：

@use 'utils' as u;

.namespace {
  color: u.$color;
  @include u.reset-box();
}

在上面的代码中，我们使用命名空间 '.namespace' 来包含了 'utils' 文件中的变量和 Mixin，避免了名称冲突。

@use 指令相对于 @import 指令来说，有以下优势和劣势：

在实际使用中，根据场景的不同，@import 和 @use 指令都有其对应的使用情境。

@import 'reset';

@use 'utils' as u;

body {
  font-size: u.$default-font-size;
}

@import 'reset';

总结一下，@import 和 @use 指令都有自己的优势和劣势。对于简单的导入操作，我们可以使用 @import 指令来完成，而对于深层次的管理和避免名称冲突，我们可以使用 @use 指令来提高编码效率和代码可维护性。综上，我们应根据不同的需求来选择使用不同的指令。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6544a8d77d4982a6ebe809fc