sass语法@import将被放弃？？？升级@use食用指南！

相信各位同学最近使用sass时会遇到控制台警告问题，这是因为随着CSS发展，sass将升级导入文件的语法，@import语法因为全局作用域，依赖关系混乱等原因将被@use语法取代。

在 Sass 中，@import 和 @use 都用于模块化代码，但二者有显著区别。以下是主要差异和具体案例说明：

@import方式

css 复制代码

//variables.scss
$primary-color: #3498db;

css 复制代码

//main.scss
@import 'variables';
.button { color: $primary-color; }

@use 方式

css 复制代码

//variables.scss
$primary-color: #3498db;

css 复制代码

// main.scss
 @use 'variables' as vars;
 .button { color: vars.$primary-color; }

首先在两个scss文件定义相同的变量

css 复制代码

// theme.scss
    $color: red;

// utils.scss
   $color: blue;

@import语法：当两个文件定义了相同的变量会产生冲突，之前加载的变量值将被覆盖

css 复制代码

// ❌ @import 的冲突
@import 'theme';
@import 'utils';
.text { color: $color; } // 输出 blue（后者覆盖前者）

@use语法：导入将使用文件名称为默认的命名空间，使用变量时需要按命名空间.变量方式引用！

css 复制代码

// ✅ @use 的隔离
@use 'theme';
@use 'utils';
.text { 
  color: theme.$color; // red
  background: utils.$color; // blue
}

使用 as语法可以修改命名空间

css 复制代码

@use 'theme' as t;
@use 'utils' as u;
.text { 
  color: t.$color; // red
  background: u.$color; // blue
}

@import语法时代通常命名变量时不区分私有和共有变量，所有导入文件都可以访问。

@use语法增加了私有变量命名规则，只需要在变量前加上"-"或者"_"，

css 复制代码

// _config.scss
$-private-var: 10px; // 私有变量（仅文件内可用）
$public-var: 20px;   // 公共变量

css 复制代码

// ❌ @import 无法隐藏
@import 'config';
.element { margin: $-private-var; } // 仍可访问

css 复制代码

// ✅ @use 保护私有
@use 'config';
.element { 
  margin: config.$public-var; // 正常
  // padding: config.$-private-var; // 报错找不到变量！
}

注意！这将带来一个问题，在以往使用@import语法时常常使用"--"开头来给变量取名，一旦迁移升级到@use语法，导出的变量将不可访问！！因为此时变量已成私有了，只能在文件内部访问！
# sass报错：[sass] Undefined variable. @import升级@use语法注意事项

@import多次引用同一文件时，会重复加载

css 复制代码

// ❌ @import 重复加载
@import 'module';
@import 'module'; // 重复编译

@use导入文件将只会加载一次！

css 复制代码

// ✅ @use 单例
    @use 'module';
    @use 'module'; // 无重复问题