In LESS, is it possible to get image dimension from the bitmap files? -
i found myself hard-coding image width numbers in less stylesheet.
it possible have less function automate this? e.g.
@banner-width : image-width("image/banner.png");
if using javascript implementation of less (less.js), use javascript interpolation between back-ticks , use normal javascript functionality - this:
@banner-width: ~`function(imguri){var img=new image(); img.src = imguri; return img.width }('image/banner.png')`;
or go further , make reusable 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); }
the output css:
.test { width: 276; height: 110; }
which should logo http://www.google.com/intl/en_all/images/logo.gif
- to add units coud add
unit(@dimension,px)
mixins.
Comments
Post a Comment