The built-in replace()
function enables you to replace a text within a string. In this recipe, you will use this function to create a mixin that sets your retina image's background URLs automatically based on the filename (URL) of your original image. High-density devices have more than one screen pixel per CSS pixel. For this reason, you should use images with a higher number of pixels on such devices to get a sharp image projection.
For this recipe, you will use the client-side less.js
compiler, as described in Chapter 1, Getting to Grips with the Basics of Less. You will also need a text editor to create and edit your HTML and Less files, an image editor to edit an image file, and a square example image, which is wider than 100 px.
Open your square example image with an image editor and resize the file to 200 px x 200 px and save the resized file to
[email protected]
. Then resize the image to 100 px x 100 px and save this file asexample...