Below given are some math functions which Less provide to use
Today we’ll be discussing some of the math functions which Less provides to operate on numerical values. The functions which Less provides to work with are given below:

• 1: Round Function
• 2: Floor Function
• 3: Ceil Function
• 4: Percentage Function

What these math functions do?
Good question, these functions provide following:

Round Function:
It simply rounds decimal number to up or down which depends on the number, whether that number is close to number above or number below.

Floor Function:
The floor function always downs the decimal number to its nearest decimal.

Ceil Function:
This function always up the decimal number to the nearest decimal.

Percentage Function:
Percentage function takes a decimal number and returns a percentage according to that provided number, that number can be provided between 0 and 1.

Why math functions required in Less?

Again a good question ! well, we do need math functions in Less when we require whole numbers during calculation. For example if we divide 20 by 7 the result will be something like: 2.857142857142857 which is impossible for someone like me to remember while it’s very tough to write by copying from other source, am i right?

So, as you will realize in later part that in certain situations we do need only whole integers as in above case it may be required 2 or 3 depending upon the situation. So, 2 can be achieved by using floor function, while 3 can be gotten by using ceil function.

Math functions usage in Less

I think a lot of discussion already there while we have to cover our topic yet, so let’s move on. We use above discussed math functions in Less as shown below:

// @width variable contains 700px 
@width: 700px;
section {
  width: @width / 3;
}
// the resulting width value will be 233.33333333 etc

If you don’t understand what’s going on in above code you may learn how to use variables in Less? well, we have width of 700px and we want to provide that width to our three sections equally. Hence in this way we got very long resulting value. So, if we want to round that figure to 233, we can simply use our floor function in this way:

// @width variable contains 200px 
@width: 700px;
section {
  width: floor(@width / 3);
}
//now the resulting width value will be 233px

Which definitely becomes very useful, other both functions can be used in this way as well. For example if we have to take value up not down we’ll may be using this way:

// @width variable contains 200px 
@width: 700px;
section {
  width: ceil(@width / 3);
}
//now the resulting width value will be 234px

If you pointed out, we have just changed our word ceil from floor and we got required result. What about if we want to use round function? No problem in same way we can use round function too, have a look below:

// @width variable contains 200px 
@width: 700px;
section {
  width: round(@width / 3);
}
//now the resulting width value will be 233px as 233.3333 etc is close to 233.

That’s it, very simple to work with these math functions. Let’s discuss percentage function now:

// @width variable contains 200px 
@width: 700px;
.other-section {
  width: percentage(0.5);
}
//now the resulting width value will be 50% which we got as we provided 0.5

Congrats! We have now covered all our functions.