Use LESS in JSFiddle, the easy way

If your like me then you love online ‘tinker tools’ like , they allow you to quickly prototype your ideas and to share them with the world. I have been using it for a while now but one of the things that always bugged me is the lack of LESS support in the panels :-(

I decided to have a play and see if I can get running but somehow still allow me to write my CSS in the correct panel. The quickest way I could think of doing this is with this one liner

1
2
3
<pre>
    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
</pre>

It’s a really simple 2 step . First find the <Style> tag and change its type to ‘text/less’. Second tell less to refresh the styles on the page. You can see a working version here

Of course this may not be the best way of doing this but its the first thing that came into my head. Got any suggestions for an improvement?

I have emailed Piotr Zalewa to see if there are any plans to implement LESS in the future so I will update here if I get a reply.

Edit: JSFiddle have their docs on here.

An Issue has already been raised to add LESS support but it has been closed of saying it will be in the Beta release

https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/168

Update: Piotr replied to my email and informed me they are planning on adding a few extra languages to support. Although they state in the above issue that LESS support will in bete he says it might be possible to add it before although there would be no ETA.

Thanks for the reply Piotr and looking forward to future updates ^_^

  • Lee Nathan

    Wow, this made me jump out of my seat.
    It’s amazing when you can find a simple solution that works without some hassle.
    Thanks.

    • http://twitter.com/AaronLayton Aaron Layton

      No problem, glad to of helped :-)

  • Mattew

    Thanks a lot for the trick, direclty forked for my futur LESS tests 😉

  • reilg

    This doesn’t work anymore. The link to the less.js file is now getting a 404.

  • tbonesteak

    This is frickin awesome man, reilg, use this CDN for the link: //cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js

  • Ryan Grissinger

    i owe you a beer, thanks, man

  • Austin Sims

    Fork with an up to date CDN url: http://jsfiddle.net/23ap1bfc/