Sass 通过导入将多个样式表与单个指南针精灵一起使用

我正试图使用compass在一个SCSS文件中导入并包含一个精灵和一组片段，并让包含的片段访问精灵生成的变量/mixin/等。这有点类似于这个问题：，但仍然不同，我想我应该问一个新问题

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

all-icons.scss 我希望能够使用从

@import“icon/*.png”

和

@生成的变量和混合，在包含的部分中包含所有图标精灵。如果不需要的话，我真的不想在每个部分中执行
@import“icon/*.png”
等操作，因为它会在每个部分中生成重复的条目。有一些方法可以绕过这个问题，不使用
@包含所有图标精灵
，而是使用
@包含图标精灵（热刺）
。这不是我理想中想要做的，但它确实有效。我不喜欢的另一件事是，当您将精灵导入多个文件时，您会得到如下结果：

   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中工作，或者我必须在每个部分中导入“icon/*.png”

，然后使用

@包含所有图标精灵

或其中的多个

@包含图标精灵（皮套）

？

我觉得有点傻，但事实证明这已经很好地工作了

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

例如，在做

$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文件的范围内编译一次，在该文件的范围外编译一次。当在该范围外编译时，任何尝试使用其中一个mixin（如

@include icon sprite（spurs）

）的行为都会导致错误，因为它不再知道这意味着什么

tl；博士

---

只要确保盗版图标是

\u pirate-icons.scss

而不是

pirate-icons.scss

，它就应该有预期的效果。

我觉得有点傻，但事实证明，这已经非常有效了

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

例如，在做

$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文件的范围内编译一次，在该文件的范围外编译一次。当在该范围外编译时，任何尝试使用其中一个mixin（如

@include icon sprite（spurs）

）的行为都会导致错误，因为它不再知道这意味着什么

tl；博士

---

只要确保盗版图标是

\u pirate-icons.scss

而不是

pirate-icons.scss

，它就应该具有所需的效果。

我不喜欢这种方法的地方是，现在在包含图标的每个文件中，都在多个css文件中定义了相同的.icon-sprite{background image:…}css类。我能做些什么吗？我不喜欢这种方法的一点是，现在在每个包含图标的文件中，相同的.icon sprite{background image:…}css类是跨多个css文件定义的。对此我能做些什么吗？