How do you use retina.less?

Question

I am trying to use the retina-1.1.0.less code from retinajs.com. It isn't working because the background images are not showing up at all.

Here is the html:

<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
</head>

Here is the retina.less:

// retina.less
// A helper mixin for 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 is the CSS (I don't think it matters, though):

#button {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
}

button.png and button@2x.png are both in the images folder. I think I might not have linked to the LESS file correctly, but I have no idea how to fix it.

Thanks

Notice that browsers have no notion of what `less` file is. So you if you link to less file you also need to include a Less compiler script (or compile your Less code to CSS offline/server-side). — seven-phases-max, Mar 24 '14 at 22:03

score 0 · Answer 1 · answered Mar 25 '14 at 06:59

The problem is that there is no LESS compiler script (as suggested by seven-phases-max).

Here is the fix to the 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>

How do you use retina.less?

1 Answers1