CSS：使用.Less管理Sprite圖像

Question

像SASS with Compass（在SCSS文件中），是否有一種方法（通過擴展或工具）直接從.Less管理Sprite？

Answer 1

如果你的意思是說它會將不同的圖像合併爲一個，我還沒有看到類似的東西。這可能會與一個工具或東西，因爲JavaScript不能輕鬆做這樣的事情。

如果計算現成精靈的背景位置是你所追求的，那麼看看這個問題，它有一個解決方案。

Calculating background-position with a formula in LESS Css

Answer 2

U可以使用這樣的：

捆綁

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