30 模块化与导入之使用 `@import` 与 `@use`

在上一篇中，我们深入讨论了 SCSS 文件结构以及模块导入的基础知识。本篇将继续探讨 SCSS 模块化与导入的高级技术，重点关注 @import 和 @use 的使用。最后，我们将为你提供一些实际案例，帮助你在项目中更高效地使用这些功能，从而改善代码的可维护性与可重用性。

@import 与 @use 的基本概念

在 SCSS 中，模块化是组织代码的重要部分，而 @import 和 @use 是两个关键的导入机制。虽然它们都可以用于引入其他 SCSS 文件，但它们的工作方式和适用场景有所不同。

@import

@import 是 SCSS 中早期使用的导入方法。它的基本语法如下：

@import 'file'; // 可以省略 .scss 扩展名

使用 @import 有以下特点：

1. 和CSS兼容性：导入的文件会包含到最终的 CSS 中，这样也与传统的 CSS 方式兼容。
2. 全局作用域：导入的变量、混入和函数会自动加入全局作用域。这有时可能会导致命名冲突。

@use

从 SCSS 1.23.0 版本开始，@use 被引入为更强大的替代方案。它的基本语法如下：

@use 'file';

@use 的特点包括：

1. 局部作用域：导入的内容在模块中是局部的，避免了全局命名冲突。在使用时需加上文件名作为前缀。
2. 只能引入一次：每个文件只会被引入一次，避免多重导入导致的重复代码问题。
3. 支持配置：可以通过 @use 的配置功能轻松地修改导入模块中变量的值。

使用案例

使用 @import

在一个项目中，你可能有多个 SCSS 文件。比如我们有以下文件结构：

/styles
  ├── _variables.scss
  ├── _mixins.scss
  ├── main.scss

在 _variables.scss 中定义了一些变量：

// _variables.scss
$primary-color: #3498db;
$font-size: 16px;

在 _mixins.scss 中定义了一些混入：

// _mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

然后在 main.scss 中使用 @import 来导入这些文件：

// main.scss
@import 'variables';
@import 'mixins';

body {
  background-color: $primary-color;
  font-size: $font-size;
}

.container {
  @include center;
  height: 100vh;
}

在这种情况下， @import 没有任何问题，但随着项目的增长，可能会出现全局命名冲突的问题。

使用 @use

为了避免上述问题，我们可以使用 @use 来导入变量和混入。在 main.scss 文件中，可以这样改写：

// main.scss
@use 'variables' as *; // 使用 as * 引入所有内容
@use 'mixins';

body {
  background-color: variables.$primary-color; // 使用模块中的变量
  font-size: variables.$font-size;
}

.container {
  @include mixins.center(); // 使用模块中的混入
  height: 100vh;
}

这里，我们使用 as * 来将 variables 模块中的变量引入到全局命名空间。对于 mixins，我们没有使用 as *，因此它的混入需要通过模块名引入，避免了命名冲突。

优化与性能考量

接下来，我们将在下一篇中深入讨论如何优化 SCSS 的使用和性能考量，包括如何更有效地管理文件、提高编译速度等。在此，您可以思考如何将 @use 与 SCSS 的其他特性（如 @forward、命名约定等）结合使用，以便为项目建立更好的模块化架构。

希望通过本篇的深入讲解，您能够清楚地理解 @import 和 @use 的使用区别，以及如何在实际项目中高效地组织样式。继续关注下一篇，探索更高级的性能优化技巧！