Sass @import 和部分文件
Sass 能够让 CSS 代码保持 DRY（Don't Repeat Yourself，不要重复自己）。编写 DRY 代码的一种方式是将相关的代码放在单独的文件中。
您可以创建包含 CSS 片段的小文件，并在其他 Sass 文件中包含它们。这些文件的例子可以是：重置文件、变量、颜色、字体、字号等。
Sass 导入文件
就像 CSS 一样，Sass 也支持 @import 指令。
@import 指令允许您将一个文件的内容包含到另一个文件中。
CSS 的 @import 指令由于性能问题存在一个主要的缺点；每次调用它都会创建一个额外的 HTTP 请求。然而，Sass 的 @import 指令会将文件包含到 CSS 中；因此在运行时不需要额外的 HTTP 调用！
Sass Import 语法
@import 文件名;
提示： 您不需要指定文件扩展名，Sass 会自动假定您指的是 .sass 或 .scss 文件。您也可以导入 CSS 文件。@import 指令会导入文件，并且在导入文件中定义的任何变量或 mixin 都可以在主文件中使用。
您可以在主文件中导入任意数量的文件
示例
@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 部分文件
默认情况下，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;
}
