The Dopefly Tech Blog

Try the LESS converter, right now!

posted under category: CSS on August 25, 2011 at 3:00 am by MrNate

Foreword: I am giving a LESS CSS talk at the Adobe MAX 2011 ColdFusion Unconference. Blogging about LESS is just one of my stepping stones to presenting. If you want the really good stuff, you should come to my session!

Today I am making public a tool I created to work with LESS CSS. This is a simple converter that takes your LESS and makes it CSS. It will help you learn and work with the LESS CSS language by showing you how things get converted and displaying any errors as they come across. Here's a screenshot to give you an idea of what you're up against.

You can type or paste some LESS code into the box on the left, then click the stupidly large center button to see the CSS that LESS generates in the right box. You can keep the CSS and use it for whatever, that's fine. I have been using it over the past couple weeks to test LESS code snippets - in this case, it's really more like a snippet compiler, a test driver or a debugger. I tried to make sure all the errors come across with as much detail as possible, but that doesn't mean that LESS always gives useful compile errors.

On Dec 27, 2012 at 11:51 AM Scott Rippey (kokanut82, by way of hotmail.com) said:

It's very helpful being able to test LESS syntax this way.I'm looking for a LESS CSS compiler that allows me to choose which version of LESS to use. They just introduced version 1.3.1, and I'd like to see a dropdown or something that lets me choose this new version, so that I can test for differences. Feel like adding that?

On Dec 27, 2012 at 1:05 PM Nathan Strutz (www.dopefly.com) said:

Yes, that sounds like a fine idea. Version drop-down, fix up the design I think, I have version two coming together in my head. Anything else you want to see?