Компас: генерировать спрайты, а также ширину/высоту на каждом изображении в спрайте

Я использую Compass (CSS Framework) для создания спрайтов. Он работает, но компас генерирует только фоновое положение для каждого изображения.

Можно ли также получить ширину и высоту для каждого изображения в спрайте?

Это мой код:

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

Может кто-нибудь объяснить мне, как я могу это сделать? Спасибо.

Ответы

Ответ 1

Это работает:

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

Но вы можете рассмотреть документированный способ использования переменных конфигурации:
http://compass-style.org/help/tutorials/spriting/

Вы просто указываете переменную конфигурации перед импортом. В вашем случае:

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

Отправка true во все включенные работы, но поскольку она недокументирована, кажется, что предпочтительными являются параметры конфигурации.

Помимо размеров, это другие доступные переменные конфигурации:

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

Ответ 2

Я нашел решение. Просто передайте true как второй аргумент:

@include all-ico-sprites(true);

Довольно просто.