Introduction to Nesting in Less.js


As the name suggests, nesting means embedding one object in another. In this article, we learn how we embed one object in another object. I am referring to my previous article. Please go and read it if you have no idea what lessjs is. 
Suppose I have P and anchor tags and in CSS I have declared classes named P and A respectively. In classic CSS the code is like the following.
  1. P{font-family:Verdana, Geneva, sans-seriffont-size:10px;}    
  2. A{font-family:Verdana, Geneva, sans-seriffont-size:14pxtext-decoration:nonecolor:#09F;}   
css output
In less, we can write the code above like this.
  1. P{font-family:Verdana, Geneva, sans-seriffont-size:10px; A{font-family:Verdana, Geneva, sans-seriffont-size:14pxtext-decoration:nonecolor:#09F;}}   
The output will be the same.

Concatenate selectors in LessJS

In classic CSS if I need to write a code for a href tag and a hover event, I must write the following code.
  1. A{font-family:Verdana, Geneva, sans-seriffont-size:14pxtext-decoration:nonecolor:#09F;}    
  2. A:hover{ text-decoration:underlinecolor:#000;}   
Concatenate selectors
But in less we need to write less code for it.
  1. A{font-family:Verdana, Geneva, sans-seriffont-size:14pxtext-decoration:nonecolor:#09F; &:hover{ text-decoration:underlinecolor:#000;})   
Another example of concatenation in less is shown in the following code in CSS.
  1. .dv{&-say{font-size:14pxcolor:#666;}&-no{font-size:20pxcolor:#FAF41B;}}   
Let me explain what I have written above. The output of this code is:
  1. .dv-say{font-size:14pxcolor:#666;}    
  2. .dv-no{font-size:20pxcolor:#FAF41B;}}   
minimal code
I hope this article is helpful for you.