Learning LESS CSS – Nested Rules

Here I comes with the next article in this article series. This article is about Nested Rules in LESS CSS. But before starting this article let’s have a look at what we have a covered so far.

Flashback

Upto now we have covered Introduction to LESS CSS, Variables in LESS CSS and Mixins in LESS CSS. So hopefully we are now done with the basics of the LESS CSS now it’s time to move further and get some detailed information about the LESS CSS.

LESS CSS – Nested Rules

Nesting of HTML element is the must required factor of the HTML page. I (In fact WE) can say that now a days no design can be converted to HTML without nesting of HTML elements. Let’s take an example of simple middle portion of the content.

Normally HTML of middle portion looks like below:

[cc lang=”html”]

[/cc]

So for above HTML you need to create below CSS classes:

[cc lang=”css”]
#middle
{
width:500px; background-color:#FFF;
font-family:arial;
}

#middle p
{
font-size:12px; color:#000;
font-weight:normal;
}
#middle p span
{
color:#333; font-weight:bold;
}
[/cc]

But hey wait here we are talking about LESS CSS. LESS CSS have provided very well way to create classes for Nested elements. Just have a look at below LESS CSS code which shows how to deal with the nested CSS rules. I will create rules for the same HTML structure.

[cc lang=”css”]
#middle
{
width:500px; background-color:#FFF;
font-family:arial;

p
{
font-size:12px; color:#000;
font-weight:normal;

span
{
color:#333; font-weight:bold;
}
}

}
[/cc]

But wait this is the simplest nesting of HTML Elements so what about the complex ones? Consider below HTML and Normal CSS code for the same:

[cc lang=”html”]

[/cc]

So for the above HTML you will need below CSS code:

[cc lang=”css”]
#middle
{
width:500px; background-color:#FFF;
font-family:arial;
}

#middle p
{
font-size:12px; color:#000;
font-weight:normal;
}
#middle p.diff_p
{
color:#333; font-weight:bold;
}

#middle a
{
color:#FC0; text-decoration:underline;
}

#middle a:hover
{
text-decoration:none;
}

[/cc]

Now let’s see how we can achieve the same CSS with LESS CSS:

[cc lang=”css”]
#middle
{
width:500px; background-color:#FFF;
font-family:arial;

p
{
font-size:12px; color:#000;
font-weight:normal;
&.diff_p
{
color:#333; font-weight:bold;
}

}

a
{
color:#FC0; text-decoration:underline;
&:hover{
text-decoration:none;
}
}

}
[/cc]

Conclusion

So now we are done with the nested rules in LESS CSS. In next article we will see about inbuilt functions provided by the LESS CSS. Keep in touch for stay updated.