CSS：.Lessを使ってスプライトイメージを管理する

Question

コンパス付きのSASS（SCSSファイル）と同じように、スプライトを.Lessから直接管理する方法がありますか（エクステンションかツール経由か）。

Answer 1

別々の画像を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); } 
     } 
    } 
}