@import和@use的区别

两个都是Sass中常用的导入方式

特性	@import（已弃用）	@use（推荐使用）
变量/函数/混入	自动全局引入	默认是私有的，需通过命名空间访问
多次引入	同一个文件会被引入多次	同一个文件只会被引入一次
命名冲突	容易出现命名冲突	避免冲突，使用命名空间隔离
编译行为	编译时会把多个文件合并为一个文件	模块化，不自动合并
是否被弃用	✅ 是，官方不推荐使用	✅ 否，是推荐使用方式

@import可以直接用

// _variables.scss
$main-color: blue;

// main.scss
@import 'variables';

body {
  color: $main-color; // 可以直接使用
}

• 如果另一个文件也定义了 $main-color，会冲突。
• 多次 @import 'variables'，它会被编译多次。

@Use需要通过命名空间访问

// _variables.scss
$main-color: blue !default;

// main.scss
@use 'variables';

body {
  color: variables.$main-color; // 通过命名空间访问
}

• 变量不会进入全局作用域，默认是私有的。

• 必须用命名空间访问（除非用 @use 'file' as *;）。

• 更适合模块化开发。

命名空间控制

@use 'variables' as v;

body {
  color: v.$main-color;
}

如果你真的想像 @import 一样让所有东西变成全局（不推荐）：

@use 'variables' as *; // 小心命名冲突