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.
- 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.
Pramod ThakurPosted Nov 6, 2014, 4:33 AM
Jaganathan Bantheswaran : Sure sir.. i ll
Pramod ThakurPosted Nov 6, 2014, 4:20 AM
Jaganathan Bantheswaran : thank you for your valuable comment. Ya that's right that i never mention any href in html code. But once you download the zip file and look into it. You got what i am trying to say... This article is talking about css that's why i did put any html code..
Jaganathan BantheswaranPosted Nov 6, 2014, 4:08 AM
Nice to know about nesting in LESS. Sorry to pin point that in your Problem section, you have mentioned that "p tag & href tag" even in some other place also. But there is no TAG called href, href is an attribute in a [anchor ] tag. Please update the content if possible. Thanks.