@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.