在LESS中,是否可以从位图文件中获取图像尺寸？

Question

我发现自己在LESS样式表中对一些图像宽度数字进行了硬编码.

可以使LESS功能自动化吗？例如

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

Answer 1

如果你使用less(less.js)的javascript实现,你可以在back-ticks之间使用javascript插值并使用普通的javascript功能 - 如下所示:

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

或者更进一步,制作可重复使用的混合物.

减:

.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

• 添加你想要的单位然后添加unit(@dimension,px)到mixins中.