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



我正试图使用compass在一个SCSS文件中导入并包含一个sprite和一堆部分,并让包含的部分访问sprite生成的变量/mixin/等。这与这个问题有点相似:在多个样式表中指南针精灵图像,但差异仍然很大,我想我应该问一个新问题。

下面是我尝试做的一个例子。

全图标

$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)吗?

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

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

例如,在进行时

$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;
// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";

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

tl;dr

只要确保盗版图标是_pirate-icons.scss而不是pirate-icons.scss,它应该具有所需的效果。

最新更新