有没有办法让指南针从不同样式表中的图像中生成精灵表单?跨多个样式表的指南针精灵图像
该tutorial谈论从文件夹中的一堆图像生成精灵,然后在1样式表中使用它。但对我来说,这似乎直觉上必须使用在我所有的样式表以下使用精灵表:
@import "icon/*.png";
@include all-icon-sprites;
我宁愿为每个精灵表设置不同的图像,然后一些如何将它们标记为精灵生成,以便指南针可以将它们收集到一个精灵,然后更新CSS来反映。
有没有办法让指南针从不同样式表中的图像中生成精灵表单?跨多个样式表的指南针精灵图像
该tutorial谈论从文件夹中的一堆图像生成精灵,然后在1样式表中使用它。但对我来说,这似乎直觉上必须使用在我所有的样式表以下使用精灵表:
@import "icon/*.png";
@include all-icon-sprites;
我宁愿为每个精灵表设置不同的图像,然后一些如何将它们标记为精灵生成,以便指南针可以将它们收集到一个精灵,然后更新CSS来反映。
指南针只为每个目录生成一个精灵。这很好,因为它可以被浏览器缓存,如果您在多个页面上使用它,则无需获取它。您可以反复使用该精灵,甚至有选择地使用您参考的教程中介绍的选择器控件。
试想一下,在你的图像文件夹有四个图标:
在一个名为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
产生。
你产生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 "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);
}
我希望它能帮助!
完美而且写得很好! :) – 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