Sass @import 和 Partials
Sass 使 CSS 代码保持 DRY（Don't Repeat Yourself，不要重复自己）。编写 DRY 代码的一种方法是将相关代码保存在单独的文件中。
您可以创建包含 CSS 代码片段的小文件，并将其包含在其他 Sass 文件中。此类文件的示例可以是：重置文件、变量、颜色、字体、字体大小等。
Sass 导入文件
就像 CSS 一样，Sass 也支持 @import 指令。
@import 指令允许您将一个文件的内容包含到另一个文件中。
CSS 的 @import 指令由于性能问题存在一个主要缺点；每次调用它都会创建一个额外的 HTTP 请求。但是，Sass 的 @import 指令将文件包含在 CSS 中；因此在运行时不需要额外的 HTTP 调用！
Sass 导入语法
@import 文件名;
提示：您无需指定文件扩展名，Sass 自动假设您指的是 .sass 或 .scss 文件。您也可以导入 CSS 文件。@import 指令导入文件，然后可以在主文件中使用导入文件中定义的任何变量或混合。
您可以在主文件中导入任意数量的文件
示例
@import "variables";
@import "colors";
@import "reset";
让我们来看一个例子：假设我们有一个名为“reset.scss”的重置文件，它看起来像这样
示例
SCSS 语法 (reset.scss)
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
现在我们想将“reset.scss”文件导入另一个名为“standard.scss”的文件中。
以下是我们的操作方法：通常在文件顶部添加 @import 指令；这样它的内容将具有全局作用域
SCSS 语法 (standard.scss)
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
因此，当“standard.css”文件被编译时，CSS 将如下所示
CSS 输出
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass 部分文件 (Partials)
默认情况下，Sass 会直接编译所有 .scss 文件。但是，当您要导入文件时，您不需要文件被直接编译。
Sass 有一个机制来解决这个问题：如果文件名以下划线开头，Sass 不会编译它。以这种方式命名的文件在 Sass 中称为部分文件 (partials)。
因此，部分 Sass 文件以一个前导下划线命名
Sass 部分文件语法
_文件名;
以下示例显示了一个名为“_colors.scss”的部分 Sass 文件。（此文件不会直接编译为“colors.css”）
示例
“_colors.scss”
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
现在，如果您导入部分文件，请省略下划线。Sass 理解它应该导入文件“_colors.scss”
示例
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
