Programmazione.it :: Less per .NET, i file CSS diventano più corti

Less per .NET, i file CSS diventano più corti

Scritto da Fabio Carucci il 17-12-2009 ore 11:54

Scrivere file CSS, almeno dal mio punto di vista, non è il massimo del divertimento, se non altro per la ridondanza di alcune tipologie di informazioni che occorre inserire al suo interno; chi lavora con Ruby utilizza la Less gem, che permette di accorciare una parte del lavoro, offrendo la possibilità di inserire variabili, operazioni, mixin e regole annidate nel file CSS.

Christopher Owen, Erik van Brakel e Daniel Hoelbling hanno speso parte del loro tempo a riscrivere Less per farne il porting per .NET Framework; il risultato è .Less (si legge "dotless") in versione beta 1 per .NET 3.5, di cui seguono alcuni piccoli esempi di codice, tratti dal sito ufficiale del progetto, che possono essere inseriti in un file CSS.

Con le variabili è possibile ad esempio impostare un colore e richiamarlo diverse volte nel file CSS:

@background_color: #4D926F;
 
#header {
  color: @background_color;
}
 
h2 {
  color: @background_color;
}

Con le operazioni invece è possibile effettuare calcoli fra valori di proprietà e colori:

@border: 1px;
@colorbase: #111;
 
#header {
  color: @colorbase * 5;
  border-left: @border;
  border-right: @border * 4;
}
 
#footer { 
  color: (@colorbase + #111) * 2.5; 
}

È anche possibile incapsulare le proprietà di una classe in un'altra utilizzando il mixin:

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#header {
  .rounded_corners;
}
 
#footer {
  .rounded_corners;
}

Infine si possono specificare delle regole annidate ad esempio per costruire dei selettori:

#header {
  color: red;
  a { 
       font-weight: bold; 
       text-decoration: none; 
    } 
}

Per utilizzare .Less occorre effettuare il download dal sito, aggiungere un riferimento nel progetto web a dotless.Core, aggiungere nel web.config il riferimento a un HTTPHandler

<add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*"/>

Sempre nel web.config si deve aggiungere il seguente riferimento nel nodo <configSections>:

<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core, Version=1.0.0.1, Culture=neutral" />

Infine occorre specificare un'ultima configurazione per decidere se abilitare .Less, oppure proseguire con il CSS standard:

<dotless 
minifyCss="false" 
cacheEnabled="true" />

Unica avvertenza è che i file contenenti dichiarazioni .Less devono avere estensione .LESS anziché .CSS.