Sass 导入与 Partials

Sass 使 CSS 代码保持 "干燥"（不要重复）。编写干代码的一种方法是将相关代码保存在单独的文件中。

您可以使用 CSS 片段创建小文件，以包含在其他 Sass 文件中。此类文件的示例可以是：重置文件、变量、颜色、字体、字体大小等。

与 CSS 一样，Sass 也支持 @import 指令。@import 指令让您可以将一个文件的内容包含在另一个文件中。

由于性能问题，CSS @import 指令有一个主要缺点；每次调用它时，它都会创建一个额外的 HTTP 请求。但是，Sass @import 指令将该文件包含在 CSS 中；所以在运行时不需要额外的 HTTP 调用！

Sass 导入语法:

 @import <i>filename</i>;

提示：您不需要指定文件扩展名，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" 文件被 transpiled 时，CSS 将如下所示

CSS 输出:

 html, body, ul, ol {
 margin: 0;
 padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
 color: red;
}

默认情况下，Sass 直接 transpiled 所有 .scss 文件。但是，如果要导入文件，则不需要直接 transpiled 该文件。

Sass 有这样一种机制：如果文件名以下划线开头，Sass 将不会对其进行 transpiles。以这种方式命名的文件在 Sass 中称为 partials。

因此，部分 Sass 文件使用前导下划线命名:

Sass Partial 语法:

  _<i>filename</i>;

以下示例显示了名为 "_colors.scss" 的部分 Sass 文件。（此文件不会直接 transpiled 到 "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;
}

Sass 导入 与 Partials