Variables can be be added once and then reused throughout the LESS and when compiled will output as the CSS values

LESS Variables are defined with an @ character
Can be different kinds of data types - these are colour, string, boolean and multi-value

Example variables

@mainColour1: navy; // named color value
@mainColour2: #000080; // hex color value
@myTeststring: " adding text"; // string variable
@paraFontsize: 1em; // numeric value
@skinnyBorder: 4px solid @mainColour1; // multi-value variable
@standardPaddingVar: 5px 10px 15px 5px; // multi-value variable



h1, h2 {
color: @mainColour2;
}

#mypara {
font-size: @paraFontsize;
border: @skinnyBorder;
padding: @standardPaddingVar;
}

Variables can be a real time saver.