Learning LESS: Nested Rules

Alex Ball continues on his journey of Learning LESS as he takes a look at Nested Rules in LESS, which will help you write extremely clean code. Now he jumps into Nested Rules, a topic that can be somewhat difficult to conceptualize, but Alex Ball will break it down with great code examples and some diagrams. If you haven’t read the first two posts on the topic, check out Learning LESS: Variables and Learning LESS: Mixins.

Alex Ball is sure you’ve heard of ‘nesting’ in code, probably referring to nested tables in old table design websites (or current table design HTML emails). With LESS, he is basically doing the same concept of nesting rules within other rules. Let’s set up an example. You’re coding a website and you’ve got a paragraph rule. In addition to your standard paragraph tag, you also have classes for an intro paragraph and a highlighted paragraph. Pretty standard, so far. For your intro paragraph class, you set the font size to be a little bit bigger and have the text be small caps. He's going to replicate the code he wrote using LESS and nested rules. A LESS nested rule starts like a regular rule. For this, he’ll also use variables, just to drill in the concept. Now Alex Ball is going to nest in the .intro class. To do this, he simply create the class as he normally would, but he include the class inside the curly braces of the paragraph rule.