@import

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

_filename;

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

@import "colors";

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