sass @use的使用

https://sass-lang.com/documentation/at-rules/use/

作用

从其它sass样式表中加载mixin、function和变量，并将来自多个样式表的css组合在一起。使用@use加载的样式表被称为“模块”。
多次加载只包含一次。

可以认为@use是@import的增强版。

语法

@use '<url>' [as alias|namespace]

注意：样式表的@use规则必须放在除@forward之外的任何规则之前，包括样式规则。然而，你可以在@use规则之前声明变量，以便在配置模块时使用。

加载普通的scss、css

加载 scss

加载css

演示@import和@use在多次引入同一个文件时的区别

@import同一个文件多次，在css文件也会出现多次

@use同一个文件多次，在css文件只会出现1次

使用模块中的成员

你可以通过编写<namespace>.<variable>, <namespace>.<function>()或 @include <namespace>.<mixin>()来访问另一个模块中的变量、函数和混合器。默认情况下，命名空间就是模块URL的最后一部分。

使用@use加载的成员（变量、函数和混合器）仅在加载它们的样式表中可见。如果其它样式表也想访问它们，则需要编写自己的@use规则。这有助于轻松确定每个成员来自何处。如果你想一次从多个文件加载成员，你可以使用@forward规则从一个共享文件转发它们。

使用模块中的变量

使用模块中的mixin

选择一个命名空间

默认情况下，模块的命名空间是其URL的最后一部分，不包括文件扩展名。然而，有时你可能想选择不同的命名空间——你可能会为经常引用的模块使用一个更短的名称，或者你可能会加载多个具有相同文件名的模块。你可以通过编写@use "<url>" as <namespace>来实现这一点。

例如：

你甚至可以通过编写@use "<url>" as *来加载一个没有命名空间的模块。不过，建议你只对自己编写的样式表这样做；否则，它们可能会引入新的成员，导致名称冲突！
例如：

私有成员

作为样式表的作者，你可能不想将你定义的所有成员都对外公开。Sass使得通过在其名称前加上-或_来定义一个私有成员变得容易。这些成员将在定义它们的样式表中像普通成员一样工作，但它们不会成为模块公共API的一部分。这意味着加载你的模块的样式表无法看到它们！

例如：

如果在导入模版使用被导入模块的私有成员就会出错：

配置

样式表可以定义带有!default标志的变量，使它们可配置。要使用配置加载模块，请编写@use <url> with (<variable>: <value>, <variable>: <value>)。配置的值将覆盖变量的默认值。

例如：

索引文件

如果你在一个文件夹中编写_index.scss或_index.sass，当你加载该文件夹本身的URL时，将自动加载索引文件。

例如：