在不同的样式表中使用相同的Compass精灵

Question

我正在使用Compass生成CSS sprites.

我找到了一种定义精灵的方法,并在不同的.scss文件中使用它,但我不确定这是否是正确的解决方案.

我能找到的最好的方法是:

• 创建一个_variables.scss部分文件
• 在_variables.scss部分文件中定义精灵
• _variables.scss在每个.scss文件中导入部分

例

_variables.scss文件:

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

firstPage.scss文件:

@import "../variables.scss";

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

secondPage.scss文件:

@import "../variables.scss";

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

这有效,但......

问题是,每次Compass编译scss文件(firstPage.scss,secondPage.scss)时,它会读取_variables.scss部分,然后读取所有图像,每次尝试生成精灵.

结果是编译过程最终结果如下:

   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

这非常慢,因为我在siteSprite图像文件夹中有很多页面和许多文件.

我该如何避免这个问题？

Answer 1

我将解释如何使用指南针精灵，希望这对您也有帮助。我通常创建一个 _base.scss 部分文件，在其中放置所有通用的 @import 和 @include 以及我的项目的任何通用 css 代码。在 _base.scss 中，我还添加了以下特定于精灵的代码（假设我保存图标的文件夹称为“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。