如何停止使用 SASS 和 Midscape 多次导入文件？答案

【问题标题】：How do I stop a file being imported more than once with SASS and Midscape?如何停止使用 SASS 和 Midscape 多次导入文件？
【发布时间】：2015-06-11 13:39:26
【问题描述】：

我刚刚学习 Sass 并使用了 @import。我有以下情况...

_master.scss

_child1.scss

_child2.scss

现在的问题是 _master 变得相当大了。因此，当我在 Visual Studio 2012 中使用 Mindscape 工具保存我的 Scss 文件（子项）时，我注意到生成的 css 文件包含两个子项的主文件中的所有 css。

基本上每次我想用'@import'引用主文件时都会得到重复的css，这对性能不利。有什么办法可以避免吗？

【问题讨论】：

标签： visual-studio-2012 sass mindscape

【解决方案1】：

如果我理解的话，听起来您真的可以从更好地使用partials 中受益。如果您不希望所有 _master.scss 被导入，则应将其分解为组件，然后根据需要导入它们。

例如，如果master.scss 包含您网站上的所有字体、颜色和列布局，您可以将其分解为以下内容：

_fonts.scss
_colors.scss
_column.scss

在master.scss 中，您将导入每个。然后您可以根据需要将这些较小的文件导入child1 和child2。

如果这不是您想要的，请尝试澄清您的问题，我也许可以提供更多帮助。

更新：在与 Imjared 讨论后，他说我应该只创建一个包含变量的文件。这似乎对我有用，所以我正在更新这个答案并将其标记为正确。

【讨论】：

是的，这就是我所做的。因此，如果我按照您所说的那样做并且我想为 $black 使用一个变量。并且该变量在 _fonts.scss 并且它在 _colours.scss 并且它是 Child 1。然后我仍然必须将 master 导入所有 .scss 表，不是吗？
为什么不直接使用 _variables.scss 并导入 that？如果只是导入未编译的内容，导入不一定是坏事。

【解决方案2】：

我使用这个 sn-p 解决了这个重复的 SCSS 来导入内容：

// src/main/scss/import-once-workaround.scss
$imported-once-files: () !default;

@function not-imported($name) {
  $imported-once-files: $imported-once-files !global;
  $module_index: index($imported-once-files, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $imported-once-files: append($imported-once-files, $name);
    @return true;
  }
  @return false;
}

然后通过以下方式导入文件：

@if not-imported("font") { @import "font"; }

我使用这种方法而不是 Zurb 来让 StyleDocco 工作，请参阅 http://paul.wellnerbou.de/2015/05/18/avoid-multiple-imports-of-the-same-scss-file-with-sass/

【讨论】：