Nesting in Less and Sass
A code should be organized. That’s the fact and I think is a very good one for the opening of the text about nesting. Less and Sass are CSS pre-processors which extend CSS language in valuable ways.
A code should be organized. That’s the fact and I think is a very good one for the opening of the text about nesting.
So... CSS is used for describing the presentation of a document written in a markup language. There are few more texts to check on CSS, e.g. positions in CSS, text underline, relative units. Every one of us is familiar with that and knows that you first need a selector to detect an element and after that comes the styling.
For the best way to select the desired element, we should use every trick there is - selectors. However, CSS doesn’t allow nesting, and every element must be selected separately. In another word, if there is a child element it should be defined completely separate from the parent.
Less and Sass
Less and Sass are CSS pre-processors which extend CSS language in valuable ways. Just one of many improvements they offer is an easier and more natural way of defining nested elements and its relative position among themselves, nesting!
Nesting makes the code easy to read, extend, and maintain. It is an option which has same interpretation in less and sass so the next explanation is universal for both of them.
Nesting
An example will tell everything (and then I will explain it, just in case):
Less/Sass:
.grandparent{
.parent1{
.child1{}
.child2{}
.child3{}
}
.parent2{
.child1{}
.child2{}
}
}
CSS:
.grandparent .parent1 .child1{}
.grandparent .parent1 .child2{}
.grandparent .parent1 .child3{}
.grandparent .parent2 .child1{}
.grandparent .parent2 .child2{}
So, instead of the defining child elements with space in the same line (CSS syntax), pre-processors enable you to use the same structure as in e.g. HTML. So if the child3 element is a child of the parent1 and parent1 is a child of the grandparent, all that is defined just like that.
Ampersand
As a developer, I'm full of best practices and pieces of advice and here comes one on this. Nesting should must be used for pseudo-classes because it is a must.
To define a specific state of an element, it is necessary to add pseudo-class next to the selector and with nesting, it's ultra-intuitive - just put ampersand next to pseudo-class. The & always refers to the parent selector when nesting. Besides this use, it can (but it's unnecessarily) be used next to the child selector but with _.
.child{
&:active{}
}
If the ampersand is located right next to the child element in nesting, it is compiled into a double class selector.
Less/Sass
.child{
&.grandchild{}
}
CSS
.child.grandchild{}
Conclusion
Deep nesting, which is actually recommended, has its downsides - it’s hard to reuse, override and make CSS file bigger, but developers who use it are aware of it all and it’s not a problem (believe me).
Use everything available to make your code writing experience as fast and as easy as you can. Nesting is naturally one of those things, so use it maximally!
Also, subscription to our newsletter is one of the things that can improve you, so use it!
Creating
software solutions
that work
