CSS: Manage Sprite Images with .Less

Question

Like SASS with Compass (in SCSS files), is there is a way (via an extention or a tool) to manage Sprite directly from the .Less ?

Answer 1

If you mean that it would combine separate images into one, I have not yet seen something like that. This would probably work with a tool or something, as javascript can not easily do something like that.

If calculating background position of readymade sprites is what you're after, then check out this question, it has a solution for just that.

Calculating background-position with a formula in LESS Css

Answer 2

U can use something like this:

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;
       } 
}

Some 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>

And some styles

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