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 filename;

提示：您不需要指定文件扩展名，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 Partials（局部文件）

默认情况下，Sass 直接转译所有 .scss 文件。但是，在导入文件时，您不需要文件被直接转译。

Sass 有一个机制：如果你用下划线开始文件名，Sass 将不会转译它。以这种方式命名的文件在 Sass 中称为 partials。

因此，partial Sass 文件使用前导下划线命名：

Sass Partial 语法：

_filename;

下例显示了名为 "_colors.scss" 的 partial Sass 文件。（此文件不会直接转换为 "colors.css"）：

实例

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

现在，如果您导入该 partial 文件，请省略下划线。Sass 的理解是它应该导入文件 "_colors.scss"：

实例

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}