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

またはさらに進んで、再利用可能なミックスインを作成します。

以下：

.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)します。