Using Variables

Variables are used throughout the entire project as a way to centralize and share commonly used values like colours, spacing, and fonts.

In most cases all the variables you will need are located in the variables.less file within your theme. Although you can change any variables you need here, the most commonly used variables are located at the top of the file, ending at the “global variables” heading. Many of these will already have been changed through the CMS during the themes settings  section of this guide. 

NB it is best not to change any of the variables which are altered by the CMS, as further changes made via the CMS will override changes made in the variables file. Only use the variables file to change variables not affected by the CMS.

I would recommend making any necessary changes to the font size, line height and padding at an early stage, as these changes may affect other css changes which you make. There are several grid based variables, these are the most commonly used ones:

Grid gutter width  – this controls the width of the gutter between columns
Box padding horizontal/vertical  – this controls the padding within panels, alerts and wells.
Box margin  - this controls the margin at the bottom of boxes

Throughout the css you can call the variables set up in variables.less, in place of the values they represent. So instead of:

a{
     color:#000000;
}

You can write:

a{
     color:@brand-primary;
}

This will save you needing to remember the exact colour references needed, and make it much easier to make any changes if the client wants to alter the colour at a later stage.

They can also be particularly useful when working with the grid in bootstrap. For example, a column in bootstrap has padding which is half of the @gutter-grid-width variable, so if you place an item within a column and you would like to cancel the effect of this padding, you can use this variable with some maths:

div.cancel-padding{
     margin:0 -(@grid-gutter-width / 2);
}

Creating a new variable

You may sometimes need to create extra variables, for example if you need to add an extra colour to your site. To do this just declare the value of your variable:

@new-colour: #000;

Then you can use it within your code in the same way as the existing variables:

a{
     color:@new-colour;
}

To keep the code organised and make it easier to edit in future, it is usually best to add new variables near the top of the  variables.less file, in this instance in the same location as the other colour variables.

See more about variables at http://lesscss.org/features/#variables-feature