Learning Less.js

Using variables to calculate sizes

Now that we have chosen the fonts we want to use, we need to ensure that we can set the right size for the occasion; thankfully, Less has a number of techniques that we can use to create our CSS styles.

The simplest technique is to assign a font size to a set variable and then reference this variable throughout your code:

@font-size-base: 14px;

Once the initial variable is set, we can then create a range of font sizes automatically, by multiplying the base value with a graduated set of numbers:

@font-size-large: @font-size-base * 1.25;
@font-size-small: @font-size-base * 0.85;
@font-size-mini: @font-size-base * 0.75;

When compiled using a precompiler, Less will convert these into valid CSS font sizes as shown in this ...