Operations in Less
Less provides all simple mathematical operations which we usually use in our daily routines like addition, subtraction, multiplication and division etc. Operations are very useful when we do use our variables with care, then it saves a lot of time and we do feel as we are working in our simple mathematics. So, lets move on.

We can use Less operations on all our numerical values like margins, heights, padding, font-sizes and even with colors etc. The rule is very simple, we just select our variable with care, you can have a look how to select variables with care? then that variable can do the rest alone. Have a look below:

//variable declaration
@padding: 10px;

As we stored our value, now we can use that variable to perform any operation we want, like add, subtract, divide or multiply. Don’t worry about “px” word in the variable, Less is intelligent enough to take care about actual numerical value, it’ll take numerical value and will operate accordingly.

Let suppose we have to provide padding 20px. We have two choices now, yes you are right. Either we can add 10 to our variable or simply we can multiply our variable by 2. Have a look practically:

//we have to provide padding 20px here
h1 {
  padding: @padding * 2;  // the result will be 20px.
}
//we are providing padding 20px but using addition operation now
h1 {
  padding: @padding + 10; 
// the result will be 20px again
}
// this time we are providing padding 5px using division opertaion
h1 {
  padding: @padding / 2;
// the result will be padding 5px
}
// now we are providing padding 5px using subtraction
h1 {
  padding: @padding - 5;
// the result will be 5px again
}

Just notice how simple is that, simply put your value in the variable and perform all your operations on single variable until that makes your work easy.

Chaining in operations: We can chain our operations like:

h1 {
  padding: @padding + 2 + 3;
// the result will be 15px
}

Just follow same math rules and apply any operation you want to.

Operator precedence in Less
As Less do follow math rules, same is true when comes operator precedence. As I was always confuse to ans this simple question when I was in my school days “5 + 5 * 5″. I simply make an ans like, hmmmm 5 + 5 = 10. Then 10 * 5 = 50. The 50 is ans these lovely days. Leave it now, while you know in math first we do perform multiplication, so the ans to the above question then becomes 5 * 5 = 25. then 25 + 5 = 30. Totally different. Same comes in Less, look at the given code:

h1 { 
  padding: @padding + 2 * 2;
// the resulting padding will be 14px as 2 * 2 = 4 + 10 = 14.
// so if we want our padding to be 24px we have to use bracket rule here same of math
// to obtain 24px we should use our operators like shown below:
  padding: (@padding + 2) * 2;
// now the result will be 24px
}

So simple, as only old school math rules. Now how to use our numerical values with color? Simple again, as every color posses hex value, so we can add any value with any other color variable Like shown below:

// red color variable
@red: #d9001f;
// the value in red variable is shown above now we can add subtract any other value in that value like shown below:
.some-class {
  background: @red + #fff;
}

In this fashion both values will be added and the resulting hex value will be our new color value. Finally, do perform these operations on remaining numerical values like margins, font-sizes etc to grasp the idea depth.