LESS CSS – Nested Rules

This is the fourth part of LESS series where we will dive into Nested Rules in LESS. If you haven’t read the earlier three articles about LESS, check out An Introduction, LESS: Variables and LESS: Mixins.

Before we start with the Nested Rules, let’s take a look at what we have a covered so far. Till yet, We have learned basics about LESS, Variables and Mixins in LESS with examples.

Now, Let’s checkout the Nested rules in LESS.

I hope you have already chain elements in HTML means nesting a table,divs etc into for designing a site.

Read about:

First of all, let’s write HTML code:

• Test

See following LESS code for above HTML

You can see that in LESS we use nested elements which make hierarchy of of CSS and easily understandable.

Let’s see the regular CSS code:

Here is the regular css code which is lengthy and not well formed.LESS have the & selector that allows nested selector to refer to the parent scope.

Let’s see the example with & selector:

Same code in regular CSS which is quite clumsy to get which is parent selector:

We are done with the Nested rules in LESS. We have learned interesting features of LESS in this article.Thanks for reading and feel free to share your thoughts and suggestions in the comment section.

In the next article of LESS Series, we’ll look Nested Rules in LESS, one of the good feature in LESS.
Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.