@mdo

Powered by Fusion

An update on Less.js & nesting your CSS

Awhile back I put together a short comparison of nesting in Less and Sass and how to improve it in both stylesheet languages. Tonight I learned I made a critical mistake in my summary of Less’s nesting features. I have no idea how I missed it, but my buddy Dave Gamache dropped the knowledge bomb on me tonight and I’m still reeling.

Here’s how I thought nesting worked in Less:

div#container {
a {
color: @link-color;
}
a:hover {
color: darken(@link-color, 25);
}
}

Based on the documentation that I read, I saw no way of nesting the :hover selector within the a selector right before. Sass allowed for this, so I was at a loss as to why Less wouldn’t do it as well.

Turns out, I just suck and it is completely possible:

div#container {
a {
color: @link-color;
&:hover {
color: darken(@link-color, 25);
}
}
}

Holy freaking awesomesauce! Thanks, Dave! Now, if you’ll excuse me, I have to go rewrite buckets of CSS to fix my nesting :).


Questions?

Have a question about this post, Bootstrap, GitHub, or anything else? Ask away on Twitter or in my AMA repo.