CSS: Quản lý ảnh Sprite bằng .Less

Question

Giống như SASS với la bàn (trong các tệp SCSS), có cách nào đó (thông qua phần mở rộng hoặc công cụ) để quản lý Sprite trực tiếp từ .Less?

Answer 1

Nếu bạn có nghĩa là nó sẽ kết hợp các hình ảnh riêng biệt thành một, tôi chưa thấy một cái gì đó như thế. Điều này có thể sẽ làm việc với một công cụ hoặc một cái gì đó, như javascript không thể dễ dàng làm điều gì đó như thế.

Nếu tính toán vị trí nền của sprites readymade là những gì bạn đang sau, sau đó kiểm tra câu hỏi này, nó có một giải pháp cho điều đó.

Calculating background-position with a formula in LESS Css

Answer 2

U có thể sử dụng một cái gì đó như thế này:

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

Một số 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> 

Và một số phong cách

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