如下图所示：quick order 文件夹下存在一个 _index.scss 文件，其导入了 styles 文件夹下的 index：

然而，styles 文件夹下并没有 index.scss 文件，只有一个 _index.scss. 然而，ctrl + click 点击上图第一行代码后，会主动跳转到 styles 文件夹下的 _index.scss 文件：

查看这个 @import 的语法：

Sass 扩大了 CSS 的 @import 规定，可能导入 Sass 和 CSS 样式表，提供对 mixin、函数和变量的拜访，并将多个样式表的 CSS 组合在一起。与须要浏览器在出现页面时收回多个 HTTP 申请的一般 CSS 导入不同，Sass 导入齐全在编译期间解决。

Sass 导入的语法与 CSS 导入雷同，只是它们容许多个导入用逗号分隔，而不是要求每个导入都有本人的 @import。此外，在缩进语法中，导入的 URL 不须要引号。

思考下列两个文件：

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

在我的 style.scss 文件里如何导入二者？

@import 'foundation/code', 'foundation/lists';

留神语法，slash 前面，下划线和扩展名 .scss 主动隐没。

当 Sass 导入一个文件时，该文件被评估，就如同它的内容间接呈现在 @import 的地位。导入文件中的任何混入、函数和变量都可用，并且其所有 CSS 都蕴含在编写 @import 的确切地位。更重要的是，在 @import 之前定义的任何 mixin、函数或变量（包含来自其余 @imports）都能够在导入的样式表中应用。

留神，须要小心反复导入问题：

如果屡次导入雷同的样式表，则每次都会从新评估。如果它只是定义了函数和 mixin，这通常没什么大不了的，然而如果它蕴含款式规定，它们将被屡次编译为 CSS。

被导入 scss 文件的定位问题

为了确保样式表实用于每个操作系统，Sass 通过 URL 而不是文件门路导入文件。这意味着您须要应用正斜杠，而不是反斜杠，即便您应用的是 Windows。

留神：如下图所示：Windows10 应用的是反斜杠：

Load paths

所有 Sass 实现都容许用户提供加载门路：Sass 在解析导入时将查找的文件系统上的门路。例如，如果你通过 node_modules/susy/sass 作为加载门路，你能够应用 @import “susy” 来加载 node_modules/susy/sass/susy.scss。

然而，导入将始终首先绝对于以后文件进行解析。仅当不存在与导入匹配的相干文件时才会应用加载门路。这可确保您在增加新库时不会意外弄乱绝对导入。

与其余一些语言不同，Sass 不要求您应用 ./ 进行绝对导入。绝对导入始终可用。

Partials

依照常规，仅用于导入而非自行编译的 Sass 文件以 _ 结尾（如在 _code.scss 中）。这些被称为局部，它们通知 Sass 工具不要尝试本人编译这些文件。您能够在导入局部时省略 _。

如果您在文件夹中写入 _index.scss 或 _index.sass，则在导入文件夹自身时，该文件将被加载到其地位。

下列是一个例子：

_code.scss 和 _lists.scss 被同一文件夹下的 _index.scss 导入：

导入时不须要应用相对路径，或者补全扩展名 .scss.

最初生成的 css：

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: