• Home»
• Recommended reading for web developers

Forewords

After reading the excellent blog from Matt Brailsford about .LESS and the Client Dependency Framework, I have with succes implemented it to a website. This WIKI is to help other to place a .less in their webproject.

This WIKI is only for installing .LESS. If you want to make use of the Client Dependency Framework at the same time, please take a look at Matt Brailsford blog.

Besides that, now it's possible and even easier to do this with the package called uLess from Justin Spradlin. Nice job Justin.

How to do it

1. Download https://github.com/dotless/dotless/downloads and extract only the file dotless.Core.dll
   
   
2. Place the file dotless.Core.dll into the directory /bin/
   
   
3. Setup the HTTP Handler code in your web.config file:
   

   In IIS6
   <configuration>
    <system.web>
    <httpHandlers>
    <add verb="*" path="*.less" type="dotless.Core.LessCssHttpHandler, dotless.Core" validate="false" />
    </httpHandlers>
    </system.web>
   </configuration>
   
   In IIS7
   <configuration>
    <system.webServer>
    <handlers>
    <remove name="DotLessCss" />
    <add name="DotLessCss" verb="*" path="*.less" type="dotless.Core.LessCssHttpHandler, dotless.Core" preCondition="integratedMode" />
    </handlers>
    </system.webServer>
   </configuration>
   

4. In your Template Master, instead of placing a CSS stylesheet you write the following code to call a .less instead
   <link href="/scripts/less/style.less" rel="stylesheet" type="text/css" media="screen" />
   
   
5. It's not possible to place the .less files under CSS in Umbraco (see below), so you have to place the .less files under Settings > Scripts, make a new folder called less
   
   
6. In your /config/umbracoSettings.config you place less under scriptFileTypes so you can create .less files in the script area in Umbraco:
   

   <scripteditor>
     <!-- Path to script folder - no ending "/" -->
     <scriptFolderPath>/scripts</scriptFolderPath>
     <!-- what files can be opened/created in the script editor -->
     <scriptFileTypes>js,xml,less</scriptFileTypes>
     <!-- disable the codepress editor and use a simple textarea instead -->
     <!-- note! codepress editor always disabled in IE due to automatic hyperlinking "feature" in contenteditable areas -->
     <scriptDisableEditor>false</scriptDisableEditor>
   </scripteditor>

7. From now on you can make .less files directly in Umbraco without starting other programs or a FTP.
   

Alternative method

In step 3 above, substitute the value of the path attribute with "*.less.css", then name your files with the suffix .less.css instead of just .less. The dotLess files will then show up in the Stylesheets section instead.