Question

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

LESS功能可以自动化吗？ e.g。

@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')`;

或进一步制作可重复使用的mixins。

<强> 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

的内容

添加单元，然后将unit(@dimension,px)添加到mixins中。

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

1 个答案: