sprite - Using the same Compass sprite in different stylesheets

Question

I'm using Compass to generate CSS sprites.

I found a way to define a sprite once and use it across different .scss files, but I'm not sure this is the right solution.

The best way I could find until now is:

• create a _variables.scss partial file
• define the sprite inside the _variables.scss partial file
• import the _variables.scss partial in every .scss file

Example

_variables.scss file:

$siteSprite-spacing: 20px; 
@import "siteSprite/*.png";

firstPage.scss file:

@import "../variables.scss";

.close {
    @include siteSprite-sprite(close, true);
}

secondPage.scss file:

@import "../variables.scss";

.viewMore {
    @include siteSprite-sprite(arrow, true);
}

And this works, but...

The problem is that every time that Compass compiles the scss files (firstPage.scss, secondPage.scss) it reads the _variables.scss partial and then reads all the images, trying to generate the sprite each time.

The result is that the compile process ends up in this:

   create generated_images/siteSprite-s526a535d08.png
unchanged generated_images/siteSprite-s526a535d08.png
   create css/firstPage.css 
unchanged generated_images/siteSprite-s526a535d08.png
   create css/secondPage.css
unchanged generated_images/siteSprite-s526a535d08.png
   create css/thirdPage.css
unchanged generated_images/siteSprite-s526a535d08.png

And this is extremely slow, because I have many pages and many files inside the siteSprite image folder.

How can I avoid this problem?

Answer 1

我将解释我如何使用指南针精灵，希望这对你也有帮助。我通常会创建一个 _base.scss 部分文件，在其中放置所有通用的 @import 和 @include 以及我项目的任何通用 css 代码。在 _base.scss 中，我还添加了以下特定于 sprite 的代码（假设我保存图标的文件夹称为“icon”并且我的图标具有 .png 扩展名）：

@import "compass/utilities/sprites";
@import "icon/*.png";
@include all-icon-sprites;

这个 _base.scss 是我在我的项目的任何 *.css.scss 文件（相当于您的“firstPage.scss”和“firstPage.scss”）中导入的第一个文件。

现在，要在 div 中使用这些精灵中的任何一个，我只需这样做：

#my_id (or .my_class) {
    @extend .icon-myicon;
}

其中“myicon”是“icon”文件夹中一个 .png 文件的名称。

这个指南针教程实际上很有帮助，所以你可能想看看。

如果您担心某些文件可能会被多次导入，您可以尝试使用插件compass-import-once。