Introduction to Nesting in LessJS

In this article we learn how we implement nesting and how to concatenate selectors in LessJS.
In this series i am going to cover following things.

As name suggested nesting means embedding one object to another. In this article we learn how we embed one object to another object. I am referring to my previous article. Please go and read if you don’t have any idea about lessjs.
Problem:
Suppose I have a P and href tags and in css I have declare a class name as P and A respectively. In classic css code is look like below.

P{font-family:Verdana, Geneva, sans-serif; font-size:10px;}
A{font-family:Verdana, Geneva, sans-serif; font-size:14px; text-decoration:none; color:#09F;}

Output

1

In less we can write above code like this.

P{font-family:Verdana, Geneva, sans-serif; font-size:10px; 
A{font-family:Verdana, Geneva, sans-serif; font-size:14px; text-decoration:none; color:#09F;}}

Output will be same.
Concatenate selectors in LessJS
In classic css if I have to write a code for href tag and there hover event. I have to write like following code.

A{font-family:Verdana, Geneva, sans-serif; font-size:14px; text-decoration:none; color:#09F;}
A:hover{ text-decoration:underline; color:#000;}

Output

2

But in less we have to write minimal code for it.

A{font-family:Verdana, Geneva, sans-serif; font-size:14px; text-decoration:none; color:#09F; &:hover{ text-decoration:underline; color:#000;})

Another example of concatenation in less is.
I have written the following code in css.

.dv{&-say{font-size:14px; color:#666;}&-no{font-size:20px; color:#FAF41B;}}

Let me explain what I have written above. The output of this code is.
.dv-say{font-size:14px; color:#666;}
.dv-no{font-size:20px; color:#FAF41B;}}
Output

3

I hope this article is helpful for you
Thanks 🙂