How to perform Operations in LESS CSS?

In earlier four posts we have learned about LESS.This is the fifth part of LESS series in which we will take a look into LESS Operations.

This is the final part of LESS series posts and we will cover this part with examples too.

Till now we have gone through four posts of LESS which are An Introduction, LESS: Variables ,LESS: Mixins and LESS: Nested Rules.

What is Operation?

Operations are the another interesting feature of LESS. Operations are the mathematical operations which will be performed with operands and operators.That means you can dynamically increase/decrease size,height,width,pixels etc in the stylesheet.

Using LESS Operations, you can add,subtract,divide,multiply values.You can operate LESS operations on any number, color or variable.

Let’s understand it by code:

Above, I have taken font-size for example. Here I have declared variable @font_size and used variable to set h1,h2 ..h6 elements font size which is different so you have used + (plus) operator and will dynamically increase size of font.

Let’s take a look at the compiled LESS

This is compiled css means how it looks when render into browser.Here i have performed add operation but You can use different element and perform different operation you require.

That’s it. We are done with the Operations in LESS also.Here I am going to wraps up this series post about LESS. You have any query or concern or want to learn more topics about LESS,leave your comments.

Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.