| CARVIEW |
Write regular CSS with your .NET apps,
then add a few variables, mixins and nested rules.
.less (pronounced dot-less) is a .NET port of the funky ruby LESS libary
Lovingly ported by Christopher Owen,
Erik van Brakel and Daniel Hoelbling
Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
@brand_color: #4D926F; #header { color: @brand_color; } h2 { color: @brand_color; }
Operations
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to do create complex relationships between properties.
@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}
Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It's just like variables, but for whole classes.
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners;
}
Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
1. Download the latest source
You can find the latest source code for dotless at GitHub and build the project
2. Include our reference to your web project
3. Add a new HttpHandler to your Web.Config
Lets make the dotless processor handle our .LESS files.
Add this entry to the HttpHandlers section of your Web.Config:
<add type=" dotless.Core.LessCssHttpHandler ,dotless.Core" validate="false" path="*.LESS" verb="*"/>
4. Add a few configuration sections (optional)
First add our config handler in the "configSections" node of your web.config
<section name="dotless" type="dotless.Core.configuration. DotlessConfigurationSectionHandler ,dotless.Core, Version=1.0.0.1, Culture=neutral" />
Now you can configure if you enable Caching and minifying or the Css output
<dotless minifyCss="false" cacheEnabled="true" />
5. Get started
Reference your LESS files the same way as you would any other CSS file, just ensure that you use the .LESS extention.
