以下是关于 Sass 的 @import 规则被废弃及替代方案的详细说明和案例代码：

为什么废弃 @import 规则

• 作用域问题：@import 会将所有引入的文件合并到一个全局作用域中，导致变量、函数和混入（mixin）的命名冲突风险增加。
• 性能问题：@import 会因嵌套导入而重复加载文件，影响编译效率，尤其是在大型项目中。
• 与 CSS 标准冲突：CSS 本身也有 @import 规则，但与 Sass 的行为不一致，容易造成混淆。

替代方案

推荐使用 @use 和 @forward 规则来替代 @import。

使用 @use

@use 是一种更安全的方式引入其他文件中的变量、函数和混合宏。通过这种方式可以更好地管理模块化样式表并减少命名冲突的风险。

• 基本用法：
  • 如果不涉及变量、函数等的使用，直接替换 @import 为 @use 即可。例如：

    // 原写法
    @import "variables";
    
    // 新写法
    @use "variables";
    

  • 如果需要使用被引入文件中的变量、函数等，需要为其设置命名空间。例如：

    // _variables.scss 文件内容如下：
    $primary-color: #4CAF50;
    $body-font-family: 'Roboto', sans-serif;
    
    // main.scss 文件中替换旧版写法为新版写法：
    @use "variables" as vars;
    
    body {
      color: vars.$primary-color;
      font-family: vars.$body-font-family;
    }
    

• 作用域提升：@use 规则会将被引入文件中的内容提升到当前文件的作用域中，但不会污染全局作用域。

使用 @forward

@forward 规则用于在模块中重新导出其他模块的内容。

• 基本用法：

  // _shared.scss
  $color: blue;
  
  // _theme.scss
  @forward "shared";
  
  // main.scss
  @use "theme";
  

  在上述代码中，main.scss 中可以通过 theme 模块访问 _shared.scss 中的 $color 变量。

自动迁移工具

Sass 团队提供了一个自动迁移工具，可以帮助开发者将现有的代码迁移到新的模块系统。

• 安装迁移工具：

  npm install -g sass-migrator
  

• 执行迁移命令：

  sass-migrator module --migrate-deps your-entrypoint.scss
  

  如果只想迁移全局内置函数，而不迁移 @import 规则，可以使用 --built-in-only 参数。

示例代码

假设有一个项目，其文件结构如下：

styles/
  _variables.scss
  _mixins.scss
  main.scss

• _variables.scss 文件内容：

  $primary-color: #4CAF50;
  $body-font-family: 'Roboto', sans-serif;
  

• _mixins.scss 文件内容：

  @mixin button {
    background-color: $primary-color;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
  }
  

• main.scss 文件内容（使用 @use 替代 @import）：

  @use "variables" as vars;
  @use "mixins" as mix;
  
  body {
    color: vars.$primary-color;
    font-family: vars.$body-font-family;
  }
  
  .button {
    @include mix.button;
  }
  

通过上述方法，可以将项目中的 @import 规则替换为 @use 和 @forward 规则，以适应 Sass 的新模块系统。