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 of what lessjs is.

Problem

Suppose I have a 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.

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



In less we can write the code above 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;}}

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.

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

Output



But in less we need to write less 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 shown in 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



I hope this article is helpful for you.