As documented in recent posts, I’ve been tinkering getting the LESS and CoffeeScript compilers running on Windows Script Host. I’ve now got round to wrapping these up as ASP.NET HTTP Handlers so you can easily use them in ASP.NET-based websites. You simply reference the *.less and *.coffee files and they get served up as CSS and JavaScript directly. For example:
<link href="content/style.less" rel="stylesheet"> <script src="content/site.coffee"></script>
No need to install add-ins into Visual Studio or add build steps to your project. The main downside is that it won’t run on non-Windows platforms under Mono (although I’m tempted adapt it to use Mozilla’s SpiderMonkey JavaScript Shell).
If you’re running Visual Studio 2010 then simply use the LessCoffee NuGet package.
PM> Install-Package LessCoffee
If you’re using Visual Studio 2008 you’ll need follow these manual steps:
- Copy LessCoffee.dll to your web application’s /bin directory
- Add the following entries to your web.config file:
<system.web> <httpHandlers> <add path="*.coffee" type="DotSmart.CoffeeScriptHandler, LessCoffee" verb="*" validate="false"/> <add path="*.less" type="DotSmart.LessCssHandler, LessCoffee" verb="*" validate="false"/> </httpHandlers> </system.web> <!-- IIS 7 --> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <handlers> <add path="*.coffee" type="DotSmart.CoffeeScriptHandler, LessCoffee" verb="*" name="DotSmart.CoffeeScriptHandler"/> <add path="*.less" type="DotSmart.LessCssHandler, LessCoffee" verb="*" name="DotSmart.LessCssHandler"/> </handlers> </system.webServer>
If you’re using Windows 2003/IIS 6 then you will need to map the file extensions *.less and *.coffee to aspnet_isapi.dll.
The source is on GitHub, obv: https://github.com/duncansmart/LessCoffee
Hi Duncan,
I was getting sick of duplicating entries all over the place to apply my theme to jqueryUI, so i hit up nuget and typed in “less css” on a whim – and there you were! Worked from the get-go – filled in my config file and everything. Thanks!
Great to hear that George! Of course the real kudos shpuld be to Alexis Sellier who created LESS. You should also check out http://www.mindscapehq.com/products/web-workbench which will give you syntax highlighting for *.less files.
While trying to include the jquery-ui theme (by renaming it with a .less extension) so that I could extend/mix some things, I found 2 hickups that prevented it from compiling.
1) .ui-widget { font-family: “\”Segoe UI\””, Helvetica, Arial, Sans-Serif;
font-size: 9pt; }
Getting rid of the “\” on either side of Segoe UI fixed it.
2) The datepicker IE fix:
display/**/: block; /*sorry for IE5*/
Got rid of the /**/ and it was fine.
Hi Duncan,
Thanks for creating this package. I installed and remove the less.js but the page look like it has no css. I’m not sure that I’m missing.
I see all the entries in the web.config and the reference to the dll.
Any clue?
Try browsing to the .less file directly to see if there are any errors being generated. Let me know white they are.
Here the results
/* Generated by DotSmart LessCoffee on 30/11/2011 4:39:20 PM – http://dotsmart.net */
/* Using LESS – Leaner CSS v1.1.5 – http://lesscss.org – Copyright (c) 2009-2011, Alexis Sellier */
/* Error in style.less.css: */
Andrés, can you send me style.less.css (gmail: duncan.smart), to see if I can work out the issue?
All fixed now – it was a bad update 😦 I need better tests! Update to 1.0.3.2 from Nuget.
Hi Duncan,
I am trying to learn coffeeScript. But I am having a problem. I couldn’t run coffeescript from coffee file in asp.net. I wrote my problem this page “http://stackoverflow.com/questions/9110405/run-coffeescript-from-coffee-file-in-asp-net”.
What should I do?
Thanks
Hi – I’ve responded on StackOverflow!
Where do I find the LessCoffee.dll?
I am working on a pretty old version of IIS
Robert, if you’re using Visual Studio 2010 or later, just use the Nuget Package Manager (http://nuget.org/)