La bàn: tạo Sprites, cộng với chiều rộng/chiều cao trên mỗi hình ảnh trong sprite

Question

Tôi đang sử dụng Compass (một CSS Framework) để tạo ra hình ảnh sprite. Nó hoạt động, nhưng la bàn chỉ tạo ra một vị trí nền cho mỗi hình ảnh.

Có thể lấy chiều rộng và chiều cao cho mỗi hình ảnh trong ảnh không?

Đây là mã của tôi:

@import "ico/*.png"; 
@include all-ico-sprites; 

Các mã được tạo:

.ico-sprite, .ico-bag-blue, .ico-bag-black { 
    background: url('../images/ico-s78b1a1919b.png') no-repeat; 
} 

.ico-bag-blue { 
    background-position: 0 0; 
} 

.ico-bag-black { 
    background-position: 0 -24px; 
} 

Và mã tôi muốn có:

.ico-sprite, .ico-bag-blue, .ico-bag-black { 
    background: url('../images/ico-s78b1a1919b.png') no-repeat; 
} 

.ico-bag-blue { 
    background-position: 0 0; 
    width:40px; 
    height:24px; 
} 

.ico-bag-black { 
    background-position: 0 -24px; 
    width:44px; 
    height:30px; 
} 

bất cứ ai có thể giải thích cho tôi làm thế nào tôi có thể làm điều đó? Cảm ơn.

Answer 1

này hoạt động:

@include all-<map>-sprites(true); 

Nhưng bạn có thể muốn xem xét các cách ghi nhận của việc sử dụng các biến cấu hình:
http://compass-style.org/help/tutorials/spriting/

Bạn chỉ cần chỉ định các biến cấu hình trước khi nhập khẩu. Trong trường hợp của bạn:

$ico-sprite-dimensions: true; 
@import "ico/*png". 
@include all-ico-sprites; 

Gửi true đến tất cả bao gồm các công trình, nhưng khi nó được cung cấp tài liệu, nó sẽ có vẻ rằng các biến cấu hình là phương pháp ưa thích.

Bên cạnh kích thước đó là những biến cấu hình khác có sẵn:

$<map>-spacing   // space in px around the sprites 
$<map>-repeat   // whether to repeat the sprite bg 
$<map>-position   // the x position of the sprite on the map 
$<map>-sprite-base-class // the base class (default ".<map>-sprite") 
$<map>-clean-up   // whether to delete old image maps 
$<map>-<sprite>-spacing // spacing, for individual sprites 
$<map>-<sprite>-repeat // repeat, for individual sprites 
$<map>-<sprite>-position // position, for individual sprites 

Answer 2

Tôi đã tìm thấy giải pháp. Chỉ cần chuyển đúng như đối số thứ hai:

@include all-ico-sprites(true); 

Khá đơn giản.