前置
使用场景：在 scss 文件中引入其他的scss文件
运行时
指的是：写的是什么编译出来的就是什么，可直接在浏览器中运行，如：
有这么一个跟SASS文件同目录的common.css文件，需要在SASS文件中引入
// common.css
body {margin: 0;}
// 在其他文件中引入
@import url("./common.css");
编译结果（vscode Live Sass Compiler 插件编译）：
@import url("./common.css");
编译时
指的是：引入的css文件，最终会在引入的文件中编译成对应具体的css，如：
@import "./common.css"
编译结果：
body { margin: 0; }
不同版本的引入方式
1.23.0 以前
- 运行时：
@import url(""); - 编译时：
@import "";
1.23.0 +
- 运行时：
@import ""; - 编译时：
@use "";
旧版引入方式导致的问题
- 混淆： import承载着两个作用（运行时 和 编译时），只看
@import比较难一下子就反应过来这是 运行时 的引入还是 编译时 的 - 污染： 假如有两个不同的SASS文件，里面都有一个相同变量名的
$color: red;，如果同时引入这两个文件的话，后引入的SASS文件中的$color: green;就会替换掉之前引入的。因为变量的调用方式只能用$color，无法区分是否是不同的模块文件 - 没有私有
新版本对应的处理方式
使用方式
要使用某个模块内的变量，需要带上 文件名 或者是 自定义的名称 ，例：
// common.scss
$color: red;
// 在其他文件中引入
@use "./common.scss";
body { color: common.$color; }
混淆
使用不同的导入方式做区分，具体：[1.23.0+](#1.23.0 +)
污染
例：有两个同级目录的scss文件，两个文件里都定义了变量$color，使用方式如下：
- 文件名不同的情况【common.scss、var.scss】，使用文件名去调用对应文件里的变量
@use "./common.scss";
@use "./var.scss";
body {
color: common.$color;
// color: var.$color;
}
- 有两个文件名一样，但不同目录的scss文件，使用自定义的命名空间名称
@use "./a/var.scss" as a;
@use "./b/var.scss" as b;
body {
color: a.$color;
// color: b.$color;
}
私有变量
- 官方文档写法（推荐写法）：用
$-定义变量，如：$-color: red - 约定俗成的写法：用
$_定义变量，如$_color: red。虽是约定的写法，但sass的检测工具也是将这种写法识别为私有 - 在
@function或@mixin中定义的变量
@mixin private-mixin {
$mixin-var: 10px; // 仅在 mixin 内可用
padding: $mixin-var;
}
// 错误：无法在外部访问 $mixin-var
.box { margin: $mixin-var; }
- 在代码块中定义的变量，仅在该块内有效
.container {
$local-size: 16px; // 仅在 .container 内可访问
.item {
font-size: $local-size; // 正确
}
}
// 错误：此处无法访问 $local-size
.other { font-size: $local-size; }
PS： 第1点的写法 为1.23.0后的写法 可以给代码添加对应的文档注释
/// @access private(or public)，或者给文件名前添加下划线_common以做区分，但实际起作用的还是@use和$-；
