Sass @import

定义和使用

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

您可以创建带有 CSS 片段的小文件，以包含在其他 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” 的重置文件，如下所示：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

现在我们想将 “reset.scss” 文件导入另一个名为 “standard.scss” 的文件。

这是我们的操作方法：通常在文件顶部添加 @import 指令；这样，其内容将具有全局作用：

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

因此，当编译 “standard.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 文件的名称前面带有一个下划线：

语法：

_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;
}