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:


@font_size :16px;

h1 {
	font-size: @font_size + 10px;
}

h2 {
	font-size: @font_size + 8;
}

h3 {
	font-size: @font_size + 6;
}

h4 {
	font-size: @font_size + 4;
}

h5 {
	font-size: @font_size + 2;
}

h6 {
	font-size: @font_size ;
}

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


h1 {
  font-size: 26px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

Avoid to use ENUM and SET type in MySQL

Posted on 7 years ago

Bhumi

How to create MySQL User Defined Functions

Posted on 7 years ago

Bhumi

Overview of ECMAScript 6 new Features

Posted on 1 year ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 3 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 4 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi