Beginner’s Guide To Sass – Nesting
Nesting is one of my favorite features Sass has to offer. I hate clunky code. I hate it when I have to inline state nav ul li a.active:hover to access that navigation’s element’s hover property. First of all, I find it highly unreadable. Second, I find it hard to actually read and find things I need.
HERE COMES THE NESTING
Sass allows you to nest the elements, quite similar to how you’d organize your HTML. You’d “nest” certain elements under it’s “parent” and you will immediately gain much better visibility of the code at hand. Let’s have a look at the example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; a { display: block; padding: 6px 12px; text-decoration: none; } } } } |
Notice we’re “indenting” just as we would indent elements in the HTML:
1 2 3 4 5 6 7 | <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> |
Only difference is, we’re following the CSS code convention, of course.
Let’s run the compiler and see what we’ll get:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 6px 12px; text-decoration: none; } |
Hopefully you can see how Nesting can save your sanity in CSS coding. In the end, all code will be minified and reduced to smallest size it can, and you’re the one who needs to write/read it now. Why not make yourself a favor and make it super readable with Nesting? 🙂
Cheers! Until next time!