跨越多个样式表的指南针精灵图像答案

【问题标题】：Compass sprite images across multiple style sheets跨越多个样式表的指南针精灵图像
【发布时间】：2013-04-14 14:39:29
【问题描述】：

有没有办法让罗盘从不同样式表的图像生成精灵表？

tutorial 谈到从文件夹中的一堆图像生成精灵，然后在一个样式表中使用它。但对我来说，在所有使用精灵表的样式表中都必须使用以下内容似乎违反直觉：

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

我希望为每个精灵表设置不同的图像，然后一些如何标记它们以生成精灵，以便指南针可以将它们收集到精灵中，然后更新 css 以反映这一点。

【问题讨论】：

标签： compass-sass

【解决方案1】：

Compass 每个目录只生成一个精灵。这很好，因为它可以被浏览器缓存，如果您在多个页面上使用它，则无需获取它。您可以反复使用该精灵，甚至可以选择性地使用您引用的教程中介绍的选择器控件。

想象一下，在您的图像文件夹中有四个图标：

images/icon/apple.png
images/icon/banana.png
images/icon/basketball.png
images/icon/football.png

在名为 fruits.sass 的样式表中，您导入所有图标，并且仅使用 apple 和 banana 图标。

@import "icon/*.png";

.fruits
  .banana
    +icon-sprite(banana)
  .apple
    +icon-sprite(apple)

在名为sports.sass 的样式表中，您导入所有图标，并且只使用basketball 和football 图标。

@import "icon/*.png";

.sports
  .football
    +icon-sprite(football)
  .basketball
    +icon-sprite(basketball)

当你编译时，一个名为icon-sjargon1.png 的精灵会在images 中生成。

images/icon/apple.png
images/icon/banana.png
images/icon/basketball.png
images/icon/football.png
images/icon-sjargon1.png

您生成的fruits.css 将类似于：

.icon-sprite,
.fruits .banana,
.fruits .apple { background: url('/images/icon-sjargon1.png') no-repeat; }

.fruits .banana { background-position: 0 -20px; }
.fruits .apple { background-position: 0 0; }

您生成的sports.css 将如下所示：

.icon-sprite,
.sports .football,
.sports .basketball { background: url('/images/icon-sjargon1.png') no-repeat; }

.sports .football { background-position: 0 -60px; }
.sports .basketball { background-position: 0 -40px; }

【讨论】：

完美，写得也很好！ :)
嗯。 @import "icon/*.png" 抛出语法错误：“...$main-clean-up”后的 CSS 无效：预期的函数参数是“);”在第 3 行的 main 的第 18 行。我也在使用 SCSS。
升级到最新的 compass.app 一切都很好:)

【解决方案2】：

您还可以分离精灵，将图像放在单独的文件夹中。例如：

@import "themeOne/*.png";
@include all-themeOne-sprites;

@import "themeTwo/*.png";
@include all-themeTwo-sprites;

当您的网站有很多部分并且可能特定部分必须有不同的主题时，这很有用。

最后一件事......

我不喜欢使用@include all-themeOne-sprites; 添加所有精灵图像，我更喜欢这样做：

@import "themeOne/*.png";

.somebox .icon {
    @include themeOne-sprite(anyIcon);
}

如果您希望.somebox .icon 的大小为anyIcon 图像，您可以在图标名称后添加true 参数，如下所示：

.somebox .icon {
    @include themeOne-sprite(anyIcon, true);
}

希望对你有帮助！

【讨论】：