Post
Ask Question

Introduction to Nesting in Less.js

Introduction

 
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. 
 
Problem
 
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-serif; font-size:10px;}    
  2. A{font-family:Verdana, Geneva, sans-serif; font-size:14px; text-decoration:none; color:#09F;}   
Output
 
css output
 
In less, we can write the code above like this.
  1. 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.
  1. A{font-family:Verdana, Geneva, sans-serif; font-size:14px; text-decoration:none; color:#09F;}    
  2. A:hover{ text-decoration:underline; color:#000;}   
Output
 
Concatenate selectors
 
But in less we need to write less code for it.
  1. 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.
  1. .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:
  1. .dv-say{font-size:14px; color:#666;}    
  2. .dv-no{font-size:20px; color:#FAF41B;}}   
Output
 
minimal code
 
I hope this article is helpful for you.


Similar Articles