How do you use retina.less? -
i trying use retina-1.1.0.less code retinajs.com. isn't working because background images not showing @ all.
here html:
<head> <link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" /> </head>
here retina.less:
// retina.less // helper mixin applying high-resolution background images (http://www.retinajs.com) @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)"; .at2x(@path, @w: auto, @h: auto) { background-image: url(@path); @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`; @media @highdpi { background-image: url("@{at2x_path}"); background-size: @w @h; } } #button { .at2x('images/button.png'); }
here css (i don't think matters, though):
#button { height: 50px; width: 50px; float: left; margin-right: 10px; }
button.png
, button@2x.png
both in images folder. think might not have linked less file correctly, have no idea how fix it.
thanks
the problem there no less compiler script (as suggested seven-phases-max).
here fix html:
<head> <link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js" ></script> </head>
Comments
Post a Comment