LESS variables and operations

I briefly introduced LESS variables in a previous tutorial. In this tutorial you’ll get a better understanding of both LESS Variables and Operations.

LESS variables

LESS variables are values that have a name.

When you add rule-sets to a style sheet you can call the value by using its name. Below you see an example:

The variable is defined in line 1 (highlighted). We want to use a color with hex value “#4D926F” on several occasions in the style sheet. Instead of inserting this hex value every time we give the value a name “@primary-color”. And we then use that name throughout the style sheet whenever we want to use that particular color.

When we compile the LESS code above into CSS we get:

A LESS variable is defined with a name that starts with an @.

It can hold any kind of valid CSS or LESS value: a hex color value, a number, a string, another variable name, a list or an escape value. We’ll get back to this later on.

Why use LESS variables

You will probably already see the advantages of using LESS variables. But I’ll still mention them anyway:

  • The use of a name instead of a value can make a style sheet much more understandable. Going through the code of your own or someone else’s style sheet and seeing all kinds of hex values will probably provoke a head ache much sooner than coming across variable names like @primary-color, @secondary-color, etc.
  • If you need to change the value you only need to go to one location in your style sheet to do so. If you want to use a different primary-color for a theme you only need to change the hex value after the variable name. This will affect all the instances in the style sheet where you used this variable name.

Value types for LESS variables

As said before the value can be any valid CSS or LESS value. We have already seen an example where the value was a hex value. Other value examples are:

Value type Example(s)
Number @variable: 25;
List @variable: 20 26;
String @variable: “A bit of text that you want to use”;
Variable @variable: @primary-color;

LESS variables features

LESS variables have a few features that you need to be aware of:

  1. If you define the value for a variable a second time the variable will hold the last value. This is what you are already used to in CSS: when you set a new value for a property later on in a style sheet the last value will be used. It’s the same for LESS variables.
  2. It doesn’t matter if you define a variable before or after using it. This is called lazy loading. So when you go through someone else’s LESS code and come upon a call for a variable that you haven’t seen specified don’t worry and don’t look back. You probably haven’t overlooked the specification because it’s being defined further on in the file.

LESS Operations

With LESS we can use operations like adding, subtracting, dividing, multiplying.

You can operate on any number, color or variable.

A requirement is that you insert an operation between parenthesis.

Below you see some examples of operations used in the Bootstrap 3 LESS files:

Operation Example
Addition @container-tablet : (( 720px + @grid-gutter-width));
Division @navbar-padding-horizontal : floor( @grid-gutter-width/2);
Multiplication @font-size-large : ceil( @font-size-base * 1.25);
Subtraction @navbar-padding-vertical : (( @navbar-height – @line-height-computed)/2);

The addition example defines (a variable that sets) the width of a container on a tablet. The specification tells us that this width is set to 720 px plus the width of a gutter in the grid. The width of a gutter is specified elsewhere.

The left and right padding of a navbar is set by the variable @navbar-padding-horizontal. A division operation specifies that the padding must be half the width of a gutter in the grid. The keyword “floor” means that the result of the operation must be rounded down to an integer.

Our third example shows how we arrive at a large font size: we use the variable @font-size-base and multiply its value by 1.25 and then the result of this multiplication is rounded up to an integer (= “ceil”).

Our final example specifies that the value for the variable @navbar-padding-vertical derives from the subtraction of one variable @line-height-computed from another variable @navbar-height. The result of this subtraction is then divided by 2.

Bootstrap defines a lot of variables with the use of other variables and operations. When you analyze the examples above (or any other rule-set in Bootstrap) you first need to understand the relationship between the variables. The operations themselves are not difficult to understand (although you might encounter more complex examples later on). The missing link to understand the examples above are words such as “floor” and “ceil”. I have explained these two functions here but the explanation of other LESS functions you might encounter can be found in the function reference index of lesscss.org.

Add your comment