在 SCSS 中，@import 和 @use 区别

• 在 SCSS 中，@import 和 @use 都是用于引入其他样式文件的规则，但它们的工作方式和用途有显著区别。
• 以下是两者的主要对比：

@import

1. 全局作用域：通过 @import 引入的文件中的变量、混合（mixins）、函数等会全局暴露，可能导致命名冲突。

  // file: _vars.scss
  $color: red;

  // file: main.scss
  @import "vars";
  .text { color: $color; } // 直接访问全局变量

2. 重复引入问题：同一文件被多次 @import 时，可能引发重复编译、变量覆盖等问题。

@use

1. 模块化作用域：通过 @use 引入的文件会形成一个独立的模块，需要通过命名空间访问其成员（默认是文件名）。

  // file: _vars.scss
  $color: red;

  // file: main.scss
  @use "vars";
  .text { color: vars.$color; } // 通过命名空间访问

2. 命名空间自定义：可以用 as 重命名模块的命名空间：

@use "vars" as v;
.text { color: v.$color; }

3. 私有成员：文件中的成员以 - 或 _ 开头时，会被视为私有，无法在模块外访问。

// _utils.scss
// 公共变量（可被外部访问）
$primary-color: blue;

// 私有变量（仅限当前文件使用）
$_private-var: red;

// 私有混合（仅限当前文件使用）
@mixin _border-radius($radius) {
  border-radius: $radius;
}

// 公共混合（可被外部访问）
@mixin box-shadow($shadow) {
  box-shadow: $shadow;
}

4. 同一文件多次 @use 只会被加载一次，避免冗余。