x First time here? Check out the FAQ

.LESS and integration into Umbraco

    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. Most of your CSS files can be moved to the Less folder, unless they need to integrate with Umbraco's Stylesheet system on the backend; this simplifies managing *.css and *.less files together. For example, you can rename an existing file to the *.less file extension as needed. The *.less files can be added just like any stylesheet file: @import url(path/to/less/file.less); within a stylesheet or *.less file, or called in HTML: <link href="path/to/less/file.less" />.

    There is also an alternative LESS Dynamic CSS Compiler package that pre-compiles css files instead of using HttpHandelers.

    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.