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 Dave Gamache shared this with 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);
    }
  }
}

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