SCSS - Lấy kích thước hình ảnh

Question

Tôi đang sử dụng chức năng inline-image để tạo các lớp biểu tượng. Đây là SCSS hiện tại của tôi:

.folder { 
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center; 
    height: 30px; 
    width: 41px; 
} 

Tôi đang tìm kiếm một chức năng mà có thể xác định chiều rộng và chiều cao của hình ảnh để tôi có thể làm điều gì đó như thế này:

.folder { 
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center; 
    height: image-height("icons/home/folder.png", 'image/png'); 
    width: image-width("icons/home/folder.png", 'image/png'); 
} 

Có bất cứ điều gì như thế này tồn tại?

Answer 1

Tìm thấy số này http://compass-style.org/reference/compass/helpers/image-dimensions/

Bạn đã đoán đúng tên hàm.

Để sử dụng chúng, bạn cần cài đặt la bàn.

Nó sẽ là một cái gì đó như thế này:

@import "compass/helpers"; 

.folder { 
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center; 
    height: image-height("icons/home/folder.png"); 
    width: image-width("icons/home/folder.png"); 
} 

Bằng cách này tôi sẽ khuyên bạn nên sử dụng sprites cho các biểu tượng: http://compass-style.org/reference/compass/helpers/sprites/