Compass sprite background position is not as я want it

Я впервые использую пиктограмму Compass. Я хотел, чтобы изображения с иконами (все в разных размерах) были расположены по центру. как прикрепленное изображение

Я использую эту настройку

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

css, который я получаю (например)

.icons-adventure {
  background-position: 0 -608px;
}

Это не то, что мне нужно. Я хочу дать больше интервалов сверху и слева.

Ответ 1

Вы можете проверить этот Github Gist: https://gist.github.com/adamlogic/3577147, что помогло мне исправить проблемы с письмом в прошлом, а также получить лучшее понимание того, как написано в Compass.

Особый интерес для вас может быть той частью, в которой автор упоминает следующее: (здесь вставлено в случае удаления Gist)

"Я принял это немного дальше, определив свой собственный (спрайт) mixin."

$spritemap-spacing: 50px
@import "spritemap/*.png"

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
  background-image: $spritemap-sprites
  background-repeat: $repeat
  +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)

  // if no offsets given, set the dimensions of the element to match the image
  @if $offset-x == 0 and $offset-y == 0
    +sprite-dimensions($spritemap-sprites, $name)

"и как я его использую

// simplest case; sets the background image and dimensions of the element
h3
  +background-sprite(ribbonfull)

// custom offset; does not set the dimensions of the element
h2
  +background-sprite(ribbonend, no-repeat, 3px, 22px)

// repeating backgrounds are possible, too
#positions
  +background-sprite(doubleline, repeat-x, 0, 45px)

И автор создал CSS:

h3 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: repeat-x;
  background-position: 0 -751px; }

Ответ 2

Ive нашел два обходных пути для этой проблемы, оба не идеальные:

Вы можете просто сохранить значок в редакторе изображений с необходимым дополнением - он работает, если вы хотите использовать его только в одном месте, иначе вам придется создавать дубликаты (поэтому это не всегда работает).
Другое решение - использовать псевдоэлементы. Предположим, что вы хотите добавить фон, и вы разместили свои значки в папке значков:

@import "icons/*.png";

el { 
  position: relative; 
}

el:after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  @include icons-sprite(some_icon); 
  margin-top: - round(icons-sprite-height(some_icon) / 2); 
  margin-left: - round(icons-sprite-width(some_icon) / 2);    
}

Ответ 3

$icons-spacing определяет количество пикселей, разделяющих каждое изображение в сгенерированной карте спрайтов. Я считаю, что вы хотите настроить $icons-position, который корректирует (смещает) сгенерированные стили background-position

Ответ 4

Во-первых, хороший вопрос...

Когда вы даете спрайты в CSS, вы сможете создавать классы с помощью .image-name. И так работают работы Compass. Ваше изображение будет добавлено к большому изображению спрайта, и все нерегулярные изображения будут сгруппированы в сетке.

Несмотря на то, что $icons-spacing дает вам возможность подавать некоторую прокладку в сетку, вам будет нелегко поставить ее в этом случае. Итак, в соответствии с тем, что сгенерировано, мы сделаем следующее.

Итак, если вы хотите что-то вроде изображения, вам нужно центрировать элемент, у которого есть класс, созданный компасом.

Теперь скажите, что у вас есть adventure.png, и он сгенерировал этот класс:

.icons-adventure {
    background-position: 0 -608px;
}

Теперь, если вы хотите сделать это в центре, вы можете сделать это.

<div class="border">
    <i class="icons-adventure"></i>
</div>

И для класса border введите отступы. Итак, что я имею в виду, вы завернули .border в .icons-adventure. Теперь вам нужно дать немного отступов и ширины.

.border {padding: 15px; width: 40px;}

Здесь нет необходимости в высоте, так как высота автоматически берется. Позвольте мне прийти со скрипкой для вас, чтобы получить четкое объяснение.

Ответ 5

Если вы знаете размер своего значка, вы можете установить высоту по умолчанию для всех значков и дать одиночным значкам вертикальное смещение (высота по умолчанию - высота значка)/2 и положение по горизонтали с центром:

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);

Ответ 6

Если вы используете Bootstrap 3, просто используйте следующий код, его простой и чистый,

SASS File

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

И в HTML/Slim File я просто использую center-block, предоставленный Twitter Bootstrap 3, My HTML helper,

=content_tag('div','',:class=>'home-save_money center-block')

В основном это просто центрирует выравнивание изображений в центре div, все вышеприведенные ответы используют некоторые пользовательские Mixins или хак.

PS: Даже если вы не используете twitter bootstrap, просто используйте следующий CSS, который бы сделал трюк,

display: block;
margin-left: auto;
margin-right: auto;

Надеюсь, это поможет кому-то,