通过导入将多个样式表与单个 Compass 精灵一起使用

Question

我正在尝试使用指南针在一个 SCSS 文件中导入和包含一个精灵和一堆部分，并让包含的部分可以访问精灵生成的变量/mixins/等。这有点类似于这个问题：Compass sprite images across multiple stylesheets，但仍然不同，我想我会问一个新问题。

这是我正在尝试做的一个示例。

all-icons.scss

$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";

我希望能够在包含的部分中使用从@import "icon/*.png" 和@include all-icon-sprites 生成的变量和mixin。如果我不需要，我真的不想在每个部分中做@import "icon/*.png" 等，因为它会在每个部分中生成重复的条目。有一些方法可以通过不使用@include all-icon-sprites 而是使用@include icon-sprite(spurs) 之类的东西来解决这个问题。这不是我想要做的理想情况，但它确实有效。我不喜欢的另一件事是，当您将精灵@import 放入多个文件时，您会得到类似：

   create images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
   create stylesheets/all-icons.css

有没有办法让这样的东西在 Compass 中工作，还是我必须在每个部分中使用 @import "icon/*.png"，然后使用 @include all-icon-sprites 或多个 @include icon-sprite(holster)？

Answer 1

我觉得有点傻，但事实证明这已经很完美了。

只有在包含常规 sass 文件而不是部分文件时才会遇到问题（pirate-icons.scss = 常规，_pirate-icons.scss = 部分）。当这些文件不是部分文件时它不起作用的原因是 compass 在它们包含的文件范围之外单独编译它们，这可能导致不一致和错误，因为这些样式表不再知道精灵变量和 mixins，当你尝试使用它们时。

比如在做的时候

$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";

如果cowboy-icons 是cowboy-icons.scss，它将在all-icons.scss 文件范围内编译一次，在该文件范围外编译一次。在该范围之外进行编译时，任何尝试使用像 @include icon-sprite(spurs) 这样的 mixin 都会导致错误，因为它不再知道这意味着什么。

tl;博士

只要确保pirate-icons 是_pirate-icons.scss 而不是pirate-icons.scss，它应该会产生预期的效果。