CSS: Administrar imágenes de Sprite con .Less

Question

Al igual que SASS con Compass (en archivos SCSS), ¿hay alguna forma (a través de una extensión o una herramienta) para administrar Sprite directamente desde .Less?

Answer 1

Si quiere decir que combinaría imágenes separadas en una, todavía no he visto algo así. Esto probablemente funcionaría con una herramienta o algo así, ya que JavaScript no puede hacer algo como eso.

Si lo que buscas es calcular la posición de fondo de los sprites prefabricados, entonces echa un vistazo a esta pregunta, tiene una solución para eso.

Calculating background-position with a formula in LESS Css

Answer 2

U puede usar algo como esto:

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

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

Y algunos estilos

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