Single post in Guide to CSS: Beginner to Expert

I've seen some pretty ugly hacks for "hide this if the number is zero", including such things as font-size: [math]NUMBER / NUMBER[/math]em; (which "works" by abusing the fact that dividing by zero with the [math] code returns zero, and anything else returns one - but it doesn't "work" if the browser enforces a minimum font size for accessibility reasons!) Here's a much cleaner way: .hide-when-zero(@number) when (@number = 0) { display: none; } .fire-fang { .hide-when-zero([inventory=Fire Fang]); } // repeat for other items This makes use of LESS Mixin Guards, and allows much more control. You could even do stuff with ranges of numbers, let's say you want to hide when zero, fade out things you have less than 5 of, and bold things you have at least 20 of. Easy! .number-formatting(@number) when (@number = 0) { display: none; } .number-formatting(@number) when (5 > @number) { // note you must use 5 > @number instead of @number < 5 // because the < is converted to &lt; and breaks LESS opacity: 0.5; } .number-formatting(@number) when (@number >= 20) { font-weight: bold; } .fire-fang { .number-formatting([inventory=Fire Fang]); } // repeat for other items Example (not actual inventory numbers, just testing!)