This recipe will show you how to work with units in Less. Less allows you to work with values and units as defined in CSS3.
For this recipe, you will need a text editor and a Less compiler. In Chapter 1, Getting to Grips with the Basics of Less, we learned how to use and install the less.js
client-side or command-line lessc
compiler. We will need those skills for this recipe.
Use a Less compiler to compile the following Less code into the CSS code:
.distance { centimeters: convert(10mm,cm); inches: convert(10mm,in); pixels: convert(10mm,px); points: convert(10mm,pt); picas: convert(10mm,pc); }
You will find that the Less code compiles into the CSS code, as follows:
.distance{ centimeters: 1cm; inches: 0.39370079in; pixels: 37.79527559px; points: 28.34645669pt; picas: 2.36220472pc; }
As can be seen in the Creating complex relationships between properties recipe in Chapter 1, Getting to Grips...