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
- Download https://github.com/dotless/dotless/downloads and extract only the file dotless.Core.dll
- Place the file dotless.Core.dll into the directory /bin/
- Setup the HTTP Handler code in your web.config file:
<add verb="*" path="*.less" type="dotless.Core.LessCssHttpHandler, dotless.Core" validate="false" />
<remove name="DotLessCss" />
<add name="DotLessCss" verb="*" path="*.less" type="dotless.Core.LessCssHttpHandler, dotless.Core" preCondition="integratedMode" />
- 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" />
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
- In your /config/umbracoSettings.config you place less under scriptFileTypes so you can create .less files in the script area in Umbraco:
- From now on you can make .less files directly in Umbraco without starting other programs or a FTP.
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.