सीएसएस: स्प्रेइट छवियों को प्रबंधित करें .स

Question

कम्पास (एससीएसएस फाइलों में) के साथ एसएएसएस की तरह, क्या स्प्राइट को सीधे से प्रबंधित करने के लिए एक तरीका (विस्तार या उपकरण के माध्यम से) है।

Answer 1

यदि आपका मतलब है कि यह अलग-अलग छवियों को एक साथ जोड़ देगा, तो मैंने अभी तक ऐसा कुछ नहीं देखा है। यह शायद किसी टूल या कुछ के साथ काम करेगा, क्योंकि जावास्क्रिप्ट आसानी से ऐसा कुछ नहीं कर सकता है।

यदि रेडीमेड स्प्राइट्स की पृष्ठभूमि स्थिति की गणना करना आपके बाद है, तो इस प्रश्न को देखें, इसके लिए इसका समाधान है।

Calculating background-position with a formula in LESS Css

Answer 2

यू कुछ इस तरह उपयोग कर सकते हैं:

बंडल

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