Question

有没有办法让指南针从不同样式表中的图像生成精灵表？

tutorial谈论从文件夹中的一堆图像生成精灵，然后在1样式表中使用它。但对我来说，在我使用精灵表的所有样式表中使用以下内容似乎都是直截了当的：

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

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

Answer 1

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

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

图像/图标/ apple.png
图像/图标/ banana.png
图像/图标/ basketball.png
图像/图标/ 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的精灵。

图像/图标/ apple.png
图像/图标/ banana.png
图像/图标/ basketball.png
图像/图标/ football.png
图像/图标-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; }

Answer 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);
}

我希望它有所帮助！

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

2 个答案: