I’ve found some time to add a bit to my NLess CSS Minify-and-more T4 template, which is based on ideas from the LESS Ruby gem. This is still not feature-complete with the LESS gem, but it does add quite a few things from my previous script. Namely, it allows addition, multiplication, subtraction and division of color, where the previous version just did addition and subtraction. It also now allows multiplication and division of units, which lets you do stuff like this:
It also supports what LESS calls mixins, so that you can reuse chunks of CSS throughout your app:
This seems kind of silly at first, but it does have a nice benefit in that it leaves your markup clean and semantic:
<div id=”rightSidebar” class=”panel”>blah</div>
As before, this is really just a little fun thing that may or may not make it into production. I like the ideas, but am a little worried about all the Regex goo (now I have two problems :). I’m pretty sure the right way to do this would be to implement a full-on DSL for processing a CSS-like language with these features, something I’m not sure I’m ready to tackle. Just as important to me is trying out some TDD tactics in building this T4. You don’t see testing mentioned much alongside code-generation, but it’s really been a good fit. Writing tests first has really helped me think through exactly how I want the code-gen to work, and definitely caught some bugs in the process.
Anyway, here’s the updated t4. As before, to use, simply copy this to a file named ‘NLess.tt’ in the same folder as your .css file(s). The result will be a file named NLess.css that you can use in place of your CSS:
And of course my tests: