FranklinDKitamory
@FranklinDKitamory
Frontend junior

Как настроить шаблон вывода CSS в Grunt Spritesmith?

Внедряю в проект вот эту штуку https://github.com/Ensighten/grunt-spritesmith

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

Вот так вывод выглядит по умолчанию:
.icon-audio-mid {
  background-image: url(build/sprite.png);
  background-position: -32px -128px;
  width: 32px;
  height: 32px;
}


Хочу реализовать следующий вариант вывода:
.icon {
  background-image: url(build/sprite.png);
}
.icon-audio-mid {
  background-position: -32px -128px;
  width: 32px;
  height: 32px;
}
.icon-video-mid {
  background-position: -32px -128px;
  width: 32px;
  height: 32px;
}

И присваивать тегу с иконкой два класса - icon и класс конкретно взятой иконки. Но не могу победить шаблонизатор плагина, либо выводится как по умолчанию, либо нет имён классов.

Если есть какая-нибудь документация, более подробная, чем на гитхабе, буду благодарен.
  • Вопрос задан
  • 3213 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы