In weniger, ist es möglich, Bild Dimension aus den Bitmap-Dateien zu bekommen?

Question

Ich habe einige Bildbreitennummern in meinem LESS-Stylesheet programmiert.

Es ist möglich, eine LESS-Funktion dies zu automatisieren? z.B.

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

Answer 1

Wenn Sie eine Javascript Implementierung von weniger (less.js) verwenden, können Sie Javascript Interpolation zwischen Back-Zecken verwenden könnten und normale Javascript-Funktionalität nutzen - etwa so:

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

oder gehen Sie weiter und machen Sie wiederverwendbare Mixins.

WENIGER:

.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); 
} 

die Ausgabe CSS:

.test { 
    width: 276; 
    height: 110; 
} 

das ist genau das, was es für dieses Logo http://www.google.com/intl/en_ALL/images/logo.gif

• zur Anzeige sein sollte d die Einheiten können Sie dann unit(@dimension,px) in die Mixins hinzufügen.