Sass @import 和部分

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

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

Sass 导入文件

就像 CSS 一样，Sass 也支持@import指示。

这个@import指令允许您将一个文件的内容包含在另一个文件中。

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

Sass 导入语法：

@import filename;

提示：您不需要指定文件扩展名，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 直接转译所有 .scss 文件。但是，当您想要导入文件时，不需要直接转译该文件。

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

因此，部分 Sass 文件以前导下划线命名：

Sass 部分语法：

_ filename;

以下示例显示了名为 "_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;
}