Какой есть удобный способ быстро создавать css спрайты, а также изменять их легко, если было сделано что то не так?

Question

[freeman0204]

На сайте около 25 картинок мелких. Создал спрайт через онлайн сервис. Потом нужно было изменить пару картинок, заново сгенерировал спрайт. Немного имена спрайтов сбились, короче гемор...

Нашел статью, как сделать спрайты через Gulp. но там как я понял нужно использовать препроцессор. Я пока их не использую.

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

Comments

[Денис Инешин]

Откройте для себя LESS/SASS/Stylus. Поверьте мне, счастье оно близко.

Answer 1

[Андрей Хохлов]

Есть, gulp + препроцессор)

Имхо объективных причин отказываться от препроцессоров сегодня нет. Независимо от масштаба проекта.

https://github.com/twolfson/gulp.spritesmith
Почитайте документацию, можно css генерировать.

Answer 2

[sim3x]

Если картинки меньше 5кб и если ие8+ то используй base64

Comments

[freeman0204]

Да у меня самое больше изображение которое используется в спрайте 3КБ. А что будет если больше 5КБ? Я попробовал вставить картинку с фотошоп (помог плагин png hat) screenshot.ru/1e8d3e6214dfed8d12989242cd459364 вот что получилось screenshot.ru/1d062306f93460c4a256a9141d788fed. Мне нравится. Т.е. я получаю то что и со спрайтами, меньше запросов, но если я захочу заменить картинку, я просто заменю код бейс 64 и все? и не нужно ничего лепить и соединять.

[sim3x]

Артур Черешнюк: ие8 не покажет такую картинку

В sass/less есть механизм преобразования картинки в base64 и вставка в css, но можно и руками

Да, просто меняеш текст в base64
Да не нужно ничего лепить и соеднять

Главное не переусердствовать и сделать css размером в 1Мб - стоит ограничиться 256кб

[freeman0204]

sim3x: обычно я использую min версию, и она у меня занимает 7 КБ (сайт средний) так что думаю свободно можно делать бейс 64... Почему в ие8 не покажет? Вроде как обычный код бейс 64.

[sim3x]

Артур Черешнюк: без понятия - мс не открыл исходники ие