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

Question

我发现自己在我的 LESS 样式表中硬编码了一些图像宽度数字。

可以让 LESS 功能自动执行此操作吗？例如

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

Answer 1

如果您使用的是 less (less.js)的javascript实现，则可以在反引号之间使用 javascript 插值并使用普通的 javascript 功能 - 如下所示：

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

或者更进一步，制作可重用的 mixin。

较少的：

.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 中。