Back to Top

LESS CSS – Nested Rules

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:

 

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

New Features in WordPress 3.5

Posted on 5 years ago

Bhumi

How to add Tags in WordPress Pages?

Posted on 5 years ago

Bhumi

Overview of ECMAScript 6 new Features

Updated 18 years ago

Bhumi

Getting started with Amazon Web Services

Updated 18 years ago

Bhumi

Facade implementation in Laravel

Updated 18 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi