在LESS中，是否可以從位圖文件中獲取圖像尺寸？

Question

我發現自己在我的LESS樣式表中硬編碼了一些圖像寬度數字。

LESS函數可以自動執行此操作嗎？例如

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

Answer 1

如果您使用的是JavaScript的實施少（less.js），你可以使用反單引號之間的JavaScript插值和正常使用JavaScript功能 - 這樣的事情：

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

或者走得更遠，製作可重複使用的mixin。

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

輸出CSS：

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

這也正是它應該是什麼這個標誌http://www.google.com/intl/en_ALL/images/logo.gif

• 到廣告d您單位你coud然後加入unit(@dimension,px)到mixin。