Как и SASS с Compass (в файлах SCSS), есть ли способ (через расширение или инструмент) управлять Sprite непосредственно из .Less?
CSS: управление изображениями спрайтов с помощью .Less
Ответы (2)
Если вы имеете в виду, что он объединил бы отдельные изображения в одно, то я еще не видел ничего подобного. Это, вероятно, будет работать с инструментом или чем-то еще, поскольку javascript не может легко сделать что-то подобное.
Если вам нужно вычисление фоновой позиции готовых спрайтов, то проверьте этот вопрос, у него есть решение именно для этого.
Вычисление background-position с помощью формулы в LESS Css
person
Mikko Tapionlinna
schedule
05.12.2011
Вы можете использовать что-то вроде этого:
Пучок
#sprites {
.background(@image,@repeat: no-repeat,@background: transparent) {
background-image: url("/images-folder/@{image}");
background-color: @background;
background-repeat: @repeat;
}
.position(@horizontal, @vertical) {
background-position: @horizontal @vertical;
}
}
Немного HTML
<ul>
<li><a href="" title="" class="icon-1">Link 1</a></li>
<li><a href="" title="" class="icon-2">Link 2</a></li>
<li><a href="" title="" class="icon-3">Link 3</a></li>
<li><a href="" title="" class="icon-4">Link 4</a></li>
</ul>
И некоторые стили
ul{
li{
a{
#sprites > .background('icons.png');
&.icon-1 { #sprites > .position(left,top); }
&.icon-2 { #sprites > .position(left,-20px); }
&.icon-3 { #sprites > .position(left,-40px); }
&.icon-4 { #sprites > .position(left,-60px); }
}
}
}
person
ZdenekD
schedule
05.11.2012