Sass 官方文档笔记【一】At-Rules 1

都是导入外部文件的，use 和 import 有什么区别？

表面上看，use 和 import 是同一个作用：将目标文件的所有内容一并导入进标注处。

但是 import 自身有很多局限性：

• 被导入文档中的所有变量、mixin、函数都是全局 scope 的，无法轻易地被识别来源是什么
• 因为导入的全局特性，一般需要在库中添加前缀来避免命名冲突
• @extend 也会从全局寻找，无法轻易识别继承目标
• @import 在编译时，每次都会输出一次整套文件内容，在源文件多的时候会增加编译效率，使输出内容冗余
• 无法定义下游 stylesheet 无法获得的私成员或者 placeholder 选择器

基于以上缺陷，官方后来推出了新的关键词 use，现在不推荐后续的使用者继续使用 import，并且希望使用者逐渐用 use 来替代它，最终可以完全将其废止。

区别1：import 支持并列导入，use 不支持

@import "file1", "file2"
@use 'file1';
@use 'file2';

区别2：import 导入内容默认是全局，use 则讲究 scope 规则。这个点很好记忆，其实 import 就是简单粗暴地把导入目标的内容直接“吐”在标注的地方。你吐哪里，它就适用哪里的 scope 级别。你吐在全局的位置，那么它就是全局的 scope。而 use 则更精细一些，在使用它的时候，必须在前缀加上它的外部文件名命名的 scope 字段

// src/_corners.scss
$radius: 3px;
@mixin rounded {
  border-radius: $radius;
// style.scss
  @use "src/corners";
  .button {
    @include corners.rounded;
    padding: 5px + corners.$radius;
}

这里先编写了 _corners.scss 文件，然后再 style.scss 中使用了 use。注意看他之后的 mixin 和变量的使用，全都是加了用来指定 scope 字段的。

为了方便我们使用 scope，use 语法还能使用 @use "src/mystyle" as m 这样的语法，来将导入的 scope 变量化，减少重复代码。

// src/_corners.scss
$radius: 3px;
@mixin rounded {
  border-radius: $radius;
// style.scss
  @use "src/corners" as c;
  .button {
    @include c.rounded;
    padding: 5px + c.$radius;
}

既然有 scope 那么也有提升 scope 至全局的方法。方法就是使用 as + 通配符：

// src/_corners.scss
$radius: 3px;
@mixin rounded {
  border-radius: $radius;
// style.scss
  @use "src/corners" as *;
  .button {
    @include rounded;
    padding: 5px + $radius;
}

区别3：import 无法定义私成员，use 可以。在 use 对象文档中，对一个变量名称使用 - 或者 _ 进行前缀，可以让这个变量变为私成员。这中用变量大小写前缀什么的来决定变量 scope 的特征让我想到了 golang。

// src/_corners.scss
$-radius: 3px;
@mixin rounded {
  border-radius: $radius;
// style.scss
  @use "src/corners" as *;
  .button {