CSS: Управление изображениями Sprite с помощью .Less - PullRequest
Новая
       26

CSS: Управление изображениями Sprite с помощью .Less

8 голосов
/ 15 ноября 2011

Как и SASS с Compass (в файлах SCSS), есть ли способ (через расширение или инструмент) управлять Sprite напрямую из .Less?

Ответы [ 2 ]

3 голосов
/ 05 декабря 2011

Если вы имеете в виду, что он будет объединять отдельные изображения в одно, я еще не видел ничего подобного.Это, вероятно, будет работать с инструментом или чем-то еще, так как javascript не может легко сделать что-то подобное.

Если вы рассчитываете фоновое положение готовых спрайтов, то вам нужен этот вопрос, у него есть решениетолько для этого.

Расчет положения фона с формулой в МЕНЬШЕ Css

1 голос
/ 06 ноября 2012

U может использовать что-то вроде этого:

Bundle 

#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); }
        }
    }
}
...