CSS: Managing sprite images with .Less

Question

Like SASS with a compass (in SCSS files), is there a way (via extension or tool) to control Sprite directly from .Less?

Answer 1

If you mean that it combines individual images into one, I have not seen anything like it yet. This will probably work with a tool or something else, since javascript cannot easily do something like this.

If calculating the background position of the finished sprites is what you need, then check this question, it has a solution just for that.

Calculating the background position using a formula in LESS Css

Answer 2

U might use something like this:

Pack

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