Scss use命令 导入模块

1. 适用范围:

scss真正意义上的模块化，可以从其它 scss样式表中加载mixin、function和变量，并将来自多个样式表的 css组合在一起。 scss还提供了很多内置模块，我们可以通过@use使用。

注意: 存在兼容性问题，仅在Dart Sass 1.23.0以上有效，官方文档有兼容性介绍。

1. @import缺点

1. 多处导入，存在样式重复加载。
2. 因为没有命名空间，为了避免撞名，不敢使用简写的 classname，因此起名总是需要注意。
3. 没有私有函数的概念，样式完全暴露在使用import的地方，这对ui库不够友好。

梗概:

@use "去后缀的相对路径"

1. 声明变量为私有变量

1. 变量前面加一个-, 被@use导入的时候, 就不会导入该变量

2. 使用@use导入后的命名空间

1. 用文件名作为命名空间(默认)
2. 用别名作为命名空间
   1. @use "相对路径" as 别名
3. 放弃独立的命名空间, 直接导入到全局作用域下, 像@import一样
   1. @use "相对路径" as *

2. 实例:

_src/corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners";
.button {
    @include corners.rounded;
    padding: 5px + corners.$radius;
}

1. 私有成员

使用scss可以轻松地定义私有成员，私有成员命名以-或开头。 _src/corners.scss

$-radius: 3px;
@mixin rounded {
    border-radius: $-radius;
}

index.scss

@use "src/corners";
 
.button {
    @include corners.rounded;
    // Error: Private members can't be accessed from outside their modules
    padding: 5px + corners.$-radius;
}