Det är nog många av oss som har stött på de otrevligheter som kan uppstå i CSS-filer. CSS är ju tyvärr uppbyggt på ett sådant sätt att duplicering i stort sätt är omöjligt att undvika. Filerna tenderar att växa som ogräs och det kan vara riktigt jobbigt att få en ordentlig överblick och att veta var ändringar eller tillägg ska göras.

Självklart finns det lösningar på problemen: Exempelvis Sass, Less eller Stylus. Med dessa hjälpmedel blir styling betydligt mycket trevligare att jobba med eftersom vi får tillgång till verktyg som variabler och funktioner. Som med det mesta krävs lite pill för att få in någon dessa i ett projekt och därför bestämde jag mig för att ta reda på hur man på ett så enkelt sätt som möjligt kan få in Less, Sass eller Stylus i ett ASP.NET-projekt. Målet var att undvika krav på installation av nya program eller plugins för att köra projektet samt att undvika egna byggskript eller liknande. Efter en hel del undersökning så visade sig att det faktiskt går att relativt smidigt går att få in Less i ett projekt samtidigt som målet ovan kan anses vara uppfyllt. Nedan följer en genomgång för hur man går till väga.

## Grunden
I detta exempel har jag utgått från ett nytt “basic” MVC4-projekt där en del av standard-filerna har rensats bort. Vi vill ju exempelvis inte ha kvar CSS-filerna längre. Markupen på startsidan har även rensats upp så vi blir kvar med detta:

“`

“`

Så här ser less filerna ut som finns med i projektet: variables.less:

“`
@mycolor: red;
@baseSize: 14px;
@width: 600px;
“`

base.less:
“`
@import “variables”;

body
{
background: @mycolor;
font-size: @baseSize;
}
“`

site.less:
“`
@import “variables”;

.mixin-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

div {
width: @width;
height: @width/2;
background: lighten(@mycolor, 30%);
padding: 0 10px;
margin: auto;
.mixin-radius(5px);
}

h1 {
font-size: @baseSize*3;
}
“`

## DotLess
Lösningen för att transformera .less-filerna till CSS finner vi i NuGet-paketet DotLess:
`Install-Package dotless`

Efter att ha installerat paketet kan vi i web.config se att en HTTP Handler har lagts till. Denna handler gör att alla requests till less-filer (*.less) kommer att transformeras till CSS-filer innan de skickas vidare till klienten. Filerna kommer skickas som CSS-filer och innehållet kommer att vara CSS, men filerna har dock kvar filändelsen *.less. Det här fungerar under utveckling, men i produktionsmiljö är det mer tveksamt om vi vill göra transformeringar precis innan filerna skickas iväg.

## Produktion
För att gå vidare till produktion vill vi minimera och bundla filerna.

Vi kan åstadkomma detta genom att använda den vanliga bundlingen som kom med vårt nya MVC-projekt. Dock måste vi först skapa en egen transform-klass som ska användas vid bundlingen.

Det finns redan NuGet-paket som gör detta åt oss, men om man använder dessa uppstår det tyvärr problem om “@import” finns i .less-filerna när bundling görs. Och självklart vill man använda sig av “@import” då det är en mycket användbar feature. Vi får helt enkelt skriva några rader för att lösa problemet.

“`
public class LessTransform : IBundleTransform
{
public void Process(BundleContext context, BundleResponse response)
{
var content = new StringBuilder();
foreach (var file in response.Files)
{
var filePath = context.HttpContext.Server.MapPath(file.IncludedVirtualPath);
var importPath = Path.GetDirectoryName(filePath);
Directory.SetCurrentDirectory(importPath);
content.Append(Less.Parse(File.ReadAllText(filePath)));
}
response.Content = content.ToString();
response.ContentType = “text/css”;
}
}
“`

Vi har nu skapat en LessTransform som sedan kan användas vid bundling. Huvudsakliga syftet med den är att använda DotLess för att transformera Less till CSS. Det vi också har gjort är att sätta “current directory” så @import kan fungera. Det går nu att med några enkla rader kod i BundleConfig nå vårt mål.

och sedan uppdatera vår vy:
“`

@Styles.Render(“~/Content/less”)

“`

Kör vi debug-läge så görs dock varken bundling eller minfiering eftersom det skulle vara jobbigt att just debugga. Vill vi pröva hur resultatet av minfieringen och bundlingen blir så kan tillfälligt lägga till denna rad högst upp i BundleConfig.cs

`BundleTable.EnableOptimizations = true;`

HTTP Handlern som installerades ska inte finnas kvar i produktion så glöm inte bort att göa en transformation i Web.Release.config som tar bort de aktuella raderna. Så där! Nu är vi redo för aldrig mer behöva en CSS-fil i repot och det är inte mycket mer än att ladda ner ett NuGet-paket och skriva några rader kod som krävs för gå över till Less. Ladda ner exemplet från GitHub