css – 指南针:生成精灵,加上sprite中每个图像的宽度/高度

前端之家收集整理的这篇文章主要介绍了css – 指南针:生成精灵,加上sprite中每个图像的宽度/高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Compass(一个CSS框架)来生成精灵图像。
它工作,但指南针只为每个图像生成一个背景位置。

是否可以获得sprite中每个图像的宽度和高度?

这是我的代码

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

生成代码

@H_403_7@.ico-sprite,.ico-bag-blue,.ico-bag-black { background: url('../images/ico-s78b1a1919b.png') no-repeat; } .ico-bag-blue { background-position: 0 0; } .ico-bag-black { background-position: 0 -24px; }

代码我想有:

@H_403_7@.ico-sprite,.ico-bag-black { background: url('../images/ico-s78b1a1919b.png') no-repeat; } .ico-bag-blue { background-position: 0 0; width:40px; height:24px; } .ico-bag-black { background-position: 0 -24px; width:44px; height:30px; }

任何人都可以向我解释我该怎么做?
谢谢。

解决方法

这工作: @H_403_7@@include all-<map>-sprites(true);

但是,您可能需要考虑使用配置变量的文档化方式:
http://compass-style.org/help/tutorials/spriting/

您只需在导入之前指定config变量。在你的情况下:

@H_403_7@$ico-sprite-dimensions: true; @import "ico/*png". @include all-ico-sprites;

发送真正的所有包括作品,但因为它是无证的,似乎配置变量是首选的方法

除了维度,这些是可用的其他配置变量:

@H_403_7@$<map>-spacing // space in px around the sprites $<map>-repeat // whether to repeat the sprite bg $<map>-position // the x position of the sprite on the map $<map>-sprite-base-class // the base class (default ".<map>-sprite") $<map>-clean-up // whether to delete old image maps $<map>-<sprite>-spacing // spacing,for individual sprites $<map>-<sprite>-repeat // repeat,for individual sprites $<map>-<sprite>-position // position,for individual sprites

猜你在找的CSS相关文章