Dotless è il porting di Less un linguaggio dinamico che estende le funzionalità dei css aggiungendo variabili, spazi dei nomi, funzioni, etc. Possiamo creare stili annidati, riutilizzare caratteristiche comuni, definire i colori del nostro sito in un solo punto. Sarà un "compilatore" a generare per noi il css da inviare al browser.

La generazione dei css può avvenire sia lato client (tramite una libreria javascript), sia lato server tramite un compilatore oppure da C# tramite un'API, ma vediamo come utilizzare dotless con Visual Studio.

Passo 1 - Installare dotless

Per installare dotless dovete lanciare dalla Package Manager Console di Visual Studio 2010 il comando Install-Package dotless. Al termine dell'operazione avrete nella cartella packages della solution tutto quello che serve per cominciare.

Passo 2 - Creare un file .less

Aggiungete al progetto un nuovo file di tipo testo e rinominatelo con estensione .less, per agevolarvi nella compilazione della sintassi potete installare l'add-in LessExtension che potete trovare tramite NuGet. Scrivete qualche riga di codice in "linguaggio" less, magari copiandola dal sito.

Passo 3 - Scrivere un file batch che compili i file .less

Il listato sottostante permette di chiamare il compilatore dotless passando come argomenti la cartella dove trovare i file .less e la destinazione dei file css compilati. Se i file css risultassero vuoti saranno cancellati dall'ultima istruzione (utile se definite un file .less contenente solo variabili).

for /f %%F in ('dir /b %2\*.less') do (
 call %1dotless.compiler.exe -m "%~2%%F" "%~3%%~nF.css"
)

cd %~3
for /F "delims=" %%I in ('dir /B *.css') do (
  if not exist "%%I\" if %%~zI EQU 0 del "%%I"
)

Passo 4 - Lanciare il batch in PreBuild

Per fare in modo che i file css siano generati prima dell'esecuzione del sito è necessario chiamare il file batch nell'evento Pre-Build del progetto. Andate quindi nella sezione "Build Events" delle proprietà del progetto e copiate il listato seguente nel campo Pre-build event command line.

call "$(ProjectDir)less2css.bat" 
            "$(SolutionDir)packages\dotless.1.2.1.0\tool\" 
            "$(ProjectDir)content\css\less\" 
            "$(ProjectDir)content\css\"

Gli argomenti passati sono il percorso dove trovare il compilatore, la cartella dei file .less e la cartella di destinazione dei file css.

Conclusioni

Ci sono altri modi di utilizzare less, se utilizzate less.js come compilatore potete addirittura definire le proprietà degli stili richiamando funzioni javascript. Al momento ho preferito sfruttare less solo lato server per mantenere il client più leggero ed avere maggior controllo sui css generati.