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

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

该tutorial谈论从文件夹中的一堆图像生成精灵，然后在1样式表中使用它。但对我来说，这似乎直觉上必须使用在我所有的样式表以下使用精灵表：

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

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

来源

2012-02-14 F21

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

试想一下，在你的图像文件夹有四个图标：

图像/图标/ 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
图像/ 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; }

来源

2012-02-15 19:14:30 maxbeatty

完美而且写得很好！ :) – F21 2012-02-15 22:25:50

嗯。 “@import”图标/ *。png“'抛出语法错误：”... $ main-clean-up，“：预期的函数参数，后面是”;“;” 从第3行的主的第18行。我也在使用SCSS。 – F21 2012-02-16 00:12:03

升级到最新的compass.app，一切都很好:) – F21 2012-02-16 01:24:17

您也可以单独精灵把图像。例如：

@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图像，可以将图标名称后加上真实参数，像这样：

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

我希望它能帮助！

来源

2013-04-14 06:26:19 verlok

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

回答

相关问题