微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我使用Compass(一个CSS框架)来生成精灵图像。
它工作,但指南针只为每个图像生成一个背景位置。

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

这是我的代码

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

生成代码

.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;
}

代码我想有:

.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;
}

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

解决方法

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

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

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

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

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

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

$<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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。