输入

我们假设以下场景： 你有两个样式表：_variables.scss 和 layout.scss。从逻辑上讲，你将所有变量保存在变量样式表中，但希望从布局样式表中访问它们。

注意： 你可能会注意到变量样式表在其名称前面有一个下划线（’_’）。这是因为它是部分的 - 这意味着它将被导入。

sass-lang.com 说以下关于 partials 的内容： 你可以创建包含很少 CSS 片段的部分 Sass 文件，你可以将这些片段包含在其他 Sass 文件中。这是模块化 CSS 并帮助保持易于维护的好方法。 […]下划线让 Sass 知道该文件只是一个部分文件，不应该生成一个 CSS 文件。Sass partials 与 @import 指令一起使用。

SCSS 变量非常适合这种情况。让我们假设你的 _variables.scss 看起来像这样：

$primary-color: #333;

你可以使用 @import 导入它，然后使用引号将样式表的名称导入。你的布局样式表现在可能如下所示（请注意导入中没有下划线或文件扩展名）：

@import 'variables';
body {
  color: $primary-color;
}

这将输出如下内容：

body {
  color: #333;
}