Sass/scss中@import和@use的区别

SASS提供了@import和@use，允许在其他模块中重复使用混合函数和变量。

@import 允许你将sass和CSS样式表导入另一个样式表。

component.scss

$primary-color: blue;

@mixin button {
   background-color:$primary-color;
   color:white
}

让我们在style.scss中导入component.scss

@import "component.scss";
.buttonId{
   @include  button;
}

让我们在style.scss中导入component.scss use @use

@use "component.scss" as component
.buttonId{
   @include  component.button;
}

让我们看看这两者之间有什么不同

Sass和SCSS中的@import和@use规则的区别

@import:

• @import允许你导入所有全局可用的功能。

• 如果我们有多个包含变量、混合器和函数的组件，在另一个样式中导入这些组件，就很难追踪这些混合器、变量在其中的定义。

• 因为它是全局可用的，所以同名的不同组件之间会发生名称冲突。

• 在编译过程中，生成的CSS被复制到输出的CSS编译时间更长，输出的CSS内容更臃肿。这也是由于在层次结构中多次导入相同的内容造成的。

• SASS框架将废除@import规则

• 不存在只应用于特定文件的私有样式

@use:

• 它是@import的一个替代。
• 它提供了命名方式，避免了名称冲突问题。
• @use允许你只导入一次，即使你在样式中使用多个地方。
• @use默认以文件名作为命名空间来导入。
• 私有的样式只应用于当前的样式表，并带有_（下划线）和-（连字符）。
• @extend适用于导入的样式表 占位符选择器不应用命名空间命名