Компас: генерирует спрайты, плюс ширина / высота для каждого изображения в спрайте - PullRequest
Новая
       22

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

32 голосов
/ 14 августа 2011

Я использую 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;
}

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

Ответы [ 2 ]

74 голосов
/ 21 августа 2011

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

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

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

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

$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
7 голосов
/ 21 августа 2011

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

@include all-ico-sprites(true);

Очень просто.

...