在不同的样式表中使用同一个指南针精灵图标

Question

我正在使用Compass生成CSS精灵。

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

到目前为止，我找到的最好方法是：

• 创建一个_variables.scss分部文件
• 在_variables.scss分部文件中定义精灵
• 在每个.scss文件中导入_variables.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部分，然后读取所有的图片，尝试每次生成sprite。

结果是编译过程最终变成了这样：

   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图像文件夹中。

我该如何避免这个问题？

- verlok

---

为什么要为每个页面创建样式表？也许可以创建一个全局样式表，引用精灵图？如果你将每个页面的样式分离出来，为什么不将该页面的精灵图也分离出来呢？ - Tom Gillard

@verlok，不变的行应该非常快。我用自己的精灵表进行了测试，每个不变的行对我来说几乎是瞬间完成的。创建行，是的，那将会非常慢，特别是如果你有一个大的精灵表。 - zmanc

只有 create 表示罗盘正在生成精灵。unchanged 应该更快。 - sam

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教程非常有用，建议您可以看一下。

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

- user3170356