sprite - 在不同的样式表中使用相同的 Compass Sprite

Question

我正在使用 Compass 生成 CSS Sprite 。

我找到了一种方法来定义一次 Sprite 并在不同的 .scss 文件中使用它，但我不确定这是正确的解决方案。

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

创建 _variables.scss部分文件

在 _variables.scss 中定义 Sprite 部分文件

导入 _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 部分，然后读取所有图像，每次都尝试生成 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 图像文件夹中有很多页面和很多文件。

我怎样才能避免这个问题？

Answer 1

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

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

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

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

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

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

此 compass tutorial实际上很有帮助，所以你可能想看看。

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