【Sass】@use和@import的区别

@import

@import能够导入Sass和CSS样式表，提供对mixins、函数和变量的访问，并将多个样式表的CSS组合在一起。与纯CSS导入不同，纯CSS导入要求浏览器在呈现页面时发出多个HTTP请求，而Sass导入则完全在编译过程中处理。

@use

@use规则从其他Sass样式表加载mixins、函数和变量，并将多个样式表中的CSS组合在一起。@use加载的样式表被称为“模块”。Sass还提供了充满有用函数的内置模块。

从上面可以看出来这两个的规则的作用是差不多的。

但在Sass的官方文档中提到了一点：

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

翻译之后的意思

Sass团队不鼓励继续使用@import规则。Sass将在未来几年内逐步淘汰它，并最终将其从语言中完全移除。建议使用@use规则。(注意，目前只有Dart Sass支持@use。其他实现的用户必须使用@import规则。)

@import的缺点

• @import使所有变量、mixins和函数全局可访问。很难判断在哪里定义了任何东西。
• 因为一切都是全局的，会造成命名冲突，所以库必须为其所有成员加上前缀，以避免命名冲突。
• 每次@import时都会导入样式，这会增加编译时间并产生臃肿的输出。
• @extend规则也是全局的，这使得很难预测将扩展哪些样式规则。
• 无法定义不可访问的私有成员或占位符选择符

@use解决了这些这些问题

@use的优点

• @use是模块，通过模块名.xxx进行访问，能够判断是从哪里访问
• @use是模块，是隔离开的，不会发生冲突
• @use是任何以这种方式加载的样式都会在编译后的CSS输出中只包含一次，不管这些样式被加载了多少次
• @use可以定义私有成员

具体验证

以这两个文件为内容模板分别用@import、@use进行输出比较.

@mixin clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.body {
  display: flex;
  justify-self: start;
}

@mixin clearfix {
    display: block;
}

.code {
    width: 100px;
    height: 100px;
    display: block;
}

.body {
    display: flex;
    justify-self: start;
    align-items: center;
  }

1、@import的臃肿和@use只加载一次

我们将上面两个文件用@import导入，

@import "a.scss";
@import "b.scss";
@import "a.scss";

.element {
    @include clearfix;
  }

结果如下：

.body {
  display: flex;
  justify-self: start;
}

.code {
  width: 100px;
  height: 100px;
  display: block;
}

.body {
  display: flex;
  justify-self: start;
  align-items: center;
}

.body {
  display: flex;
  justify-self: start;
}

.element::after {
  content: "";
  display: table;
  clear: both;
}

/*# sourceMappingURL=c.css.map */

它会重复的进行样式引入，最后导致打包的时候样式臃肿，而@use是不能在同一个文件进行多次引用的，只加载一次

2、@import的命名冲突和@use的隔离

@import "a.scss";
@import "b.scss";


.element {
    @include clearfix;
  }

.element {
  display: block;
}

对于@import都是全局性的，因此会有命名冲突，一旦冲突之后，将会采取就近原则，采用最后一个导入的@import，而@use拥有指向性，可以选择哪个模块的进行导入