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

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

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


css sass compass-sass css-sprites
person Etienne    schedule 13.08.2011    source источник

Ответы (2)


arrow_upward
74
arrow_downward

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

@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
person numbers1311407    schedule 21.08.2011
comment
Какой бы базовый класс я ни передал, он всегда выдает ошибку. В наши дни этот параметр конфигурации кажется неработающим. - person Drew; 12.10.2012
comment
Другие, такие как '-layout', также существуют сейчас - см. >последний источник - person DrMeers; 11.06.2013
comment
Просто чтобы было ясно, порядок отражается в результате. @import ico/*png должен идти после свойства $‹map› - person cassioscabral; 27.02.2014
comment
Что за хрень... спасли мой день. Спасибо! - person Diego Agulló; 03.06.2014
comment
Есть ли способ установить значения по умолчанию для них глобально? $sprite-dimensions: true; было бы очень полезно. - person Bailey Parker; 13.06.2014
comment
@PhpMyCoder просматривает источник. не казаться таким. - person numbers1311407; 13.06.2014
comment
@ numbers1311407 Это было мое предположение, но я рад, что человек Ruby подтвердил это. Я отправил проблему на Github, чтобы запросить это. - person Bailey Parker; 14.06.2014

arrow_upward
7
arrow_downward

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

@include all-ico-sprites(true);

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

person Etienne    schedule 21.08.2011