Question

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

以下是我正在尝试做的一个例子。

全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生成的变量和mixins。如果我不需要，我真的不想在每个部分中做@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)？< / p>

Answer 1

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

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

例如，在做

时

$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;博士

确保盗版图标为_pirate-icons.scss而不是pirate-icons.scss，并且它应该具有所需的效果。

通过导入使用多个样式表和单个Compass精灵

全icons.scss

1 个答案: