LESS
Contents
Definition in pages
<link rel="stylesheet/less" href="css/my.less" type="text/css"> <script src="js/less-1.2.1.min.js" type="text/javascript"></script>
Basic usage
@main_color: Pink
Body{background-color:@main_color;}
Mixins
.rounder-corners(){
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.rounded-corners;
Mixins can have parameters and defauld values like
def:
.rounded-corners(@size :5px) {
usage:
.rounded-corners(5px);
Installation in .NET
http://www.brendanforster.com/blog/yet-another-implement-less-in-aspnetmvc-post.html
PM>Install-package dotless
Create a sample less
@color: #4D926F;
.site-title a {
color: @color;
}
h3 {
color: @color;
}
include it in Razor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/less")
@Scripts.Render("~/bundles/modernizr")
</head>
<!-- and more stuff here obvs -->
System.Web.Optimization.Less
Install-Package System.Web.Optimization.Less
BundleConfig.cs
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// NOTE: existing bundles are here
// add this line
bundles.Add(new LessBundle("~/Content/less").Include("~/Content/*.less"));
}
}
Web.Config
So you still need to tell your application how it can serve LESS files to the browser, independent all this bundling work.
dotLess will apply transforms to your web.config when you install it through NuGet to provide handlers which can process a specific LESS file:
These changes should be already there
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<configSections>
<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
</configSections>
<!-- these probably do something useful -->
<dotless minifyCss="false" cache="true" web="false" />
<system.webServer>
<handlers>
<!-- for IIS7+ -->
<add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
</handlers>
</system.webServer>
<system.web>
<httpHandlers>
<!-- for IIS6 -->
<add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />
</httpHandlers>
</system.web>
</configuration>
Config Transforms
Don’t forget to remove the handlers in your config transforms when you go to production (this is an example of the Web.Release.config transforms file).
<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<system.web>
<compilation xdt:Transform="RemoveAttributes(debug)" />
<httpHandlers>
<add xdt:Transform="Remove" xdt:Locator="Match(type)" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
<add xdt:Transform="Remove" xdt:Locator="Match(name)" name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
</handlers>
</system.webServer>
</configuration>
Problem
An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode
Solution
<system.webServer> <validation validateIntegratedModeConfiguration="false"/>
Integrating with ASP.NET
So all of this is great, but how do I actually use this in an ASP.NET app? The official LESS CSS implementation is in Ruby, but there is a .NET port called dotLESS to make it easy to integrate with ASP.NET. You can download the required assemblies/tools from the web-site, but it's probably easier to use NuGet to add the dotLESS package to your project. There are two ways that you integrate LESS CSS files into your app, either you can use an HTTP Handler to compile your LESS CSS files on-the-fly, or you can set-up a post-build action to compile your LESS CSS files prior to deployment. Let's look check out both options:
HTTP Handler to compile LESS CSS files on-the-fly
Ensure you have added dotless.Core as a reference, and ensure that your web.config file contains the highlighted lines:
<?xml version="1.0"?>
<configuration>
<configSections>
<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
</configSections>
<dotless minifyCss="true" cache="true" />
<system.web>
<httpHandlers>
<add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*" />
</httpHandlers>
</system.web>
</configuration>
The above configuration will route any http request ending in ".less" coming into your site to run through the dotLESS compiler to be converted into standard CSS. We've also specified that the CSS should be minified and cached for maximum efficiency.
Post-build action to compile LESS CSS files before deployment
Given that CSS files rarely change after an app has been deployed, a good solution is to compile your LESS CSS files before deployment. The advantage to using the HTTP Handler method is that you land up with normal static files, which IIS can serve more efficiently than running through a handler, and it also means that you files can be hosted externally, e.g. on a CDN. The simplest way to achieve this is by using a post-build action on your web project. dotLESS ships with a command line tool to compile LESS CSS; if you used NuGet to add dotLESS to your solution, the executable can be found at {solutionPath}\packages\dotless.1.1.0\Tools\dotless.Compiler.exe).
So in Visual Studio, open the properties of your web project, go to the "Build Events" section, and the in the section "Post-build event command line", insert the following line:
$(SolutionDir)\packages\dotless.1.1.0\Tools\dotless.Compiler.exe -m "$(ProjectDir)\content\*.less" "$(ProjectDir)\content\*.css"
Every time the project builds, this command will compile any .less file in the \content folder into a corresponding .css file, minifying it as well (with the -m switch).
During development this post-build approach can be frustrating as any changes you make to your .less files while your app is running are not reflected until you next build the project. Fortunately dotless.Compiler.exe has a -w switch which watches for changes to your .less files, so you can make changes without having to rebuild.
TIP
You don't actually have to use the extension .less, you can use anything. Visual Studio doesn't know how to handle .less files, so it treats them as a standard text file. If you use the naming convention {filename}.less.css, then Visual Studio will treat it as a standard CSS file and provide some formatting and intellisense. Sure it's not perfect as Visual Studio doesn't know how to handle the LESS specific features, but it's still better than nothing.
