This content originally appeared on @mdo and was authored by Mark Otto
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 :).
This content originally appeared on @mdo and was authored by Mark Otto
Mark Otto | Sciencx (2011-01-29T00:00:00+00:00) An update on Less.js & nesting your CSS. Retrieved from https://www.scien.cx/2011/01/29/an-update-on-less-js-nesting-your-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.