Центрирование спрайтов с помощью SASS / Compass

Question

У меня проблема с горизонтально центрированными спрайтами с использованием Compass Sprites.

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

Если я сделаю это:

$sprite-position: 50%;
@import "sprite/*.png"; 

тогда изображения центрируются на сгенерированном sprite.png, но CSS на самом деле что-то вроде:

background-position: -9px -223px;

вместо ожидаемого:

background-position: 50% -223px;

Какой смысл центрировать его на спрайте, если в нем будет определено местоположение, определенное таким образом? Прямо сейчас я жестко кодирую его как 50%, а ось Y - отстой, потому что, когда я добавляю новый спрайт, я должен изменить их все, что полностью противоречит цели.

Я делаю это неправильно в Compass, CSS или он просто не работает как положено? Единственный способ увидеть, как это делается, - указать размеры, затем поместить значок и отцентрировать его там. Значение в 50% осталось, так что вам не нужно это делать ... верно?

Просто примечание ... это отстой, что Compass также не поддерживает спрайты JPEG. - У нас есть около 6 рекламных изображений на первой странице, и было бы неплохо, чтобы они появились, где вы можете просто заменить изображения в папке и отсортировано!

Спасибо, Дом

Answer 1

Просто наткнулся на ваш вопрос.Я понял вашу точку зрения и имел ту же проблему.Я также пытался найти общее решение.Но это не представляется возможным, атм.

Для меня опция смещения позиции работает, но она не идеальна, потому что вы должны применить ее к каждому спрайту:

@import "socialmedia/*.png";

a.twitter {
  @include socialmedia-sprite("twitter");
  @include socialmedia-sprite-position("twitter", 50%);
}

a.facebook {
  @include socialmedia-sprite("facebook");
  @include socialmedia-sprite-position("facebook", 50%);
}

Это перезаписывает горизонтальное значение, но сохраняет вертикальное значение.

Как я уже сказал, не идеально, но работает, если вам не нужно настраивать огромное количество спитов.Вы могли бы написать миксин, хотя.Но все же ... было бы здорово, если бы сам Compass предоставил такую ​​возможность.

Answer 2

У меня была такая же проблема.Я хотел отцентрировать горизонтальный спрайт вертикально (например, создать иконку с помощью: after на встроенном элементе).К сожалению, Compass конвертировал мои 50% в 50px, поэтому я создал следующие функции:

@function _sprite-position-nth($map, $sprite, $n) {
    $positions: sprite-position($map, $sprite);
    @return nth($positions, $n);
}

@function sprite-position-x($map, $sprite) {
    @return _sprite-position-nth($map, $sprite, 1);
}

@function sprite-position-y($map, $sprite) {
    @return _sprite-position-nth($map, $sprite, 2);
}

Пример использования:

$icons: sprite-map("icons/*.png", $layout: horizontal);

a.arrow:after {
    background: $icons sprite-position-x($icons, arrow-right) 50%;
    //...
}

Я надеюсь, что смогу помочь.

Answer 3

Просто чтобы проверить, правильно ли я вас понимаю: вы создали спрайт для всех значков, которые вы хотите центрировать.Внутри спрайта все значки центрированы, так что вы можете использовать x: 50% и соответствующее значение y, верно?

Поскольку компас имеет неправильное положение фона, вы можете использовать другой метод.По крайней мере, так я и сделал.Если вам не нужна поддержка IE6 / 7, вы можете использовать функцию компасов inline-data: http://compass -style.org / reference / compass / helpers / inline-data /

Таким образом вы уменьшаете количество HTTP-запросов, что является основной целью спрайта, но в то же время вы получаете все преимущества, которые дает обычное изображение.

Если вы создаете умный миксин, это оченьочень кстати.И даже умнее спрайтов.