Back to Top

How to perform Operations in LESS CSS?

LESS - Operations

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

Really! PHP touches the 200 Million Mark

Posted on 5 years ago

John Pitt

To Swap Database Row in PHP

Posted on 6 years ago

Bhumi

Overview of Views in MySQL

Posted on 11 months ago

Bhumi

How to create Custom regions in Drupal

Posted on 5 years ago

Bhumi

How to use Custom Query in Joomla?

Posted on 5 years ago

Bhumi

Overview of ECMAScript 6 new Features

Updated 18 years ago

Bhumi

Getting started with Amazon Web Services

Updated 18 years ago

Bhumi

Facade implementation in Laravel

Updated 18 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi