0

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

_master.scss <-- 这包含我所有的全局变量，比如颜色

_child1.scss <--这是我的一个子页面，但它需要来自主人的东西

_child2.scss <--这是我的其他子页面之一，但它也需要来自 master 的东西

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

本质上，每次我想用'@import'引用主文件时都会得到重复的css，这对性能不利。有没有办法避免这种情况？

4

2 回答 2

0

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

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

_fonts.scss
_colors.scss
_column.scss

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

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

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

于 2013-09-30T17:38:18.720 回答
0

我解决了这个重复的 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/

于 2015-06-11T05:39:26.520 回答