Nesting

If you have ever worked with CSS, you've probably come up with some cascading selectors. This is when the rules where you you checking if this selector is a child under another selector, then it applies, such as below:

.header {
	margin-top: 10px;
}
.header .title {
	font-size: 2em;
}
.header .title:hover {
	text-decoration: none;
}

What about the &

The & is a way to cause the next element to be concatenated (i.e. attached) to it's parent selector. It is most common with pseudo selectors, like :hover, :focus, etc., but can be used with other selectors as well.

{less} lets you optimize/simplify your rules by nesting children within their parent selector. In this manner, it makes it more like the DOM hierarchy.

One thing to be careful of, is if you use nesting, you will need to make sure you properly open and close your braces. Failure to do so, could make some selectors not work correctly.

Let's look at the example above, but with the {less} nesting: (the spacing is not necessary, but I like for readability)

.header {
	margin-top: 10px;

	.header .title {
		font-size: 2em;

		&:hover {
			text-decoration: none;
		}
	}
}