在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。