指南针：生成精灵，加上精灵中每个图像的宽度/高度 [英] Compass: generate Sprites, plus width / height on each images in the sprite

问题描述

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

可以获得每个图像的宽度和高度sprite？

这是我的代码：

  @importico /*.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-blue，.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; 
 @importico / * png。 
 @include all-ico-sprites; 
  

发送 true

除了维度以外，还有其他可用的配置变量：

$< map> -spacing // px在sprites周围的空间
$< map> -repeat //是否重复精灵bg
$< map> -position //地图上sprite的x位置
$< map> -sprite-base-class //基类（默认为< map> -sprite）
$< map> -clean-up //是否删除旧图像映射
$< map> - < sprite& $ b $< map> - < sprite> -repeat //重复，对于个别sprites
$< map> - < sprite& code>

I'm using Compass (a CSS Framework) to generate sprite images. It work, but compass generate only a background-position for each image.

Is it possible to get also the width and the height for each image in the sprite?

This is my code:

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

The generated code:

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

And the code i would like to have:

.ico-sprite, .ico-bag-blue, .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;
}

Can anyone explain to me how I can do that? Thanks.

解决方案

This works:

@include all-<map>-sprites(true);

But you may want to consider the documented way of using configuration variables:
http://compass-style.org/help/tutorials/spriting/

You just specify the config variable before the import. In your case:

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

Sending true to the all include works, but as it's undocumented, it would seem that configuration variables are the preferred method.

Aside from dimensions these are the other configuration variables available:

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

这篇关于指南针：生成精灵，加上精灵中每个图像的宽度/高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！