Trong LESS, có thể lấy kích thước hình ảnh từ các tệp bitmap không?

Question

Tôi thấy mình mã hóa cứng một số số chiều rộng hình ảnh trong biểu định kiểu LESS của mình.

Có thể có hàm LESS tự động hóa tính năng này? ví dụ.

@banner-width : image-width("image/banner.png"); 

Answer 1

Nếu bạn đang sử dụng một javascript thực hiện ít hơn (less.js), bạn có thể sử dụng javascript suy giữa back-ve và sử dụng chức năng javascript bình thường - một cái gì đó như thế này:

@banner-width: ~`function(imguri){var img=new Image(); img.src = imguri; return img.width }('image/banner.png')`; 

hoặc đi xa hơn và tạo ra những hỗn hợp tái sử dụng.

LESS:

.width(@img) { 
    @width: ~`function(imguri){var img=new Image(); img.src = imguri; return img.width }(@{img})`; 
    width: @width; 
} 
.height(@img) { 
    @height: ~`function(imguri){var img=new Image(); img.src = imguri; return img.height }(@{img})`; 
    height: @height; 
} 

.test{ 
    @src: 'http://www.google.com/intl/en_ALL/images/logo.gif'; 
    .width(@src); 
    .height(@src); 
} 

đầu ra CSS:

.test { 
    width: 276; 
    height: 110; 
} 

đó là chính xác những gì nó nên được cho logo này http://www.google.com/intl/en_ALL/images/logo.gif

• để quảng cáo d các đơn vị bạn coud sau đó thêm unit(@dimension,px) vào mixin.