Cos'è Less

Less è un pre-compilatore del linguaggio CSS, ovvero uno strumento molto potente che ha permesso di utilizzare il CSS esattamente come un linguaggio di programmazione, con tanto di variabili e funzioni.

Grazie al Less si è reso inoltre possibile ottimizzare la scrittura del linguaggio CSS, evitando linee di codice molto lunghe per identificare elementi in cascata o ripetizioni frequenti del codice.

Setup Less

Come applicare Less ad un progetto

Setup Less

Per poter utilizzare Less all'interno di un progetto, occorre scaricare uno strumento di compilazione, ovvero un tool che permetta di convertire il codice scritto nei termini di Less, nel classico CSS.

In questo modo il browser sarà agevolato nella lettura e nella compresione del codice scritto.
Il tool che si consiglia di utilizzare per la compilazione, è Simpless: http://wearekiss.com/simpless

Setup Less

L'integrazione nel codice di un progetto, è molto semplice; innanzitutto occorre definire la struttura che permetta al compilatore di leggere il codice Less e di convertirlo in un file CSS.

Per esempio definiamo all'interno della document root del progetto, una generica cartella chiamata "style", all'interno della quale andremo a creare ulteriori cartelle:

  • less - conterrà tutto il codice less prodotto in file con estensione .less
  • css - conterrà il codice compilato, ovvero con estensione .css

Definita la struttura, è possibile creare all'interno della cartella di Less, un file generico chiamato ad esempio style.less.
Successivamente si trascina il file all'interno del tool Simpless per attivare la compilazione automatica, ovvero ad ogni salvataggio il compilatore trasformerà il file style.less, nel file style.css.

Il codice di stile che si includerà nel progetto web, sarà dunque come sempre il file style.css, ovvero il file risultante della compilazione.

Setup Less

Un ulteriore punto di forza di Less (e non siamo ancora arrivati alla scrittura del codice!!!), consiste nella scalabilità del codice che ne permette la modularità e dunque l'organizzazione.

Nello specifico, il file style.less associato al compilatore Simpless, deve essere utilizzato solo come aggregatore di tutti i file .less.
Ovvero se per esempio vogliamo definire lo stile generico di una pagina web con header, wrap e footer, dovremo creare (per buona norma) tre file .less, cioè:

  • header.less
  • wrap.less
  • footer.less

Questi file dovranno poi essere inclusi all'interno del file generico style.less, che in automatico compilerà dunque tutti i file creati generando uno ed un solo codice risultante CSS!

Se si pensa al peso di caricamento che un file .css può avere all'interno della pagina web sul browser, si capisce che avere un solo file come risultato della compilazione, sicuramente renderà la vita più semplice al browser e di conseguenza migliorerà l'esperienza di navigazione dell'utente.

Setup Less

La scalabilità descritta, può essere ovviamente estesa ed organizzata, liberamente. Si possono anche creare sottocartelle all'interno della main folder di less, per suddividere componenti ed elementi specifici delle pagine (es. i form, i pulsanti, etc..)

Codice Less

Funzionalità principali del linguaggio Less

Codice Less

L'elemento di base fondamentale per scrivere il linguaggio Less, è ovviamente il CSS.

Il semplice utilizzo del CSS applicato con gli standard del Less, renderebbe di per se già molto più agevole il lavoro di stile.
Analizziamo dunque i concetti fondamentali per impostare il progetto con la procedura da compilare.

Partendo dunque dalla struttura precedentemente descritta, il file style.less dovrà solo includere i tre file specifici.

@import "header";
@import "wrap;";
@import "footer";

Come si può notare, l'estensione .less è superflua nel processo di inclusione del file.

Codice Less

Per scrivere correttamente il codice Less all'interno delle pagine, è necessario mantenere il concetto di gerarchia, così come visto per il CSS, ma applicarlo al massimo per avere la totale leggibilità del codice.

Definiamo per esempio lo stile dell'header che dovrà avere uno stile generico (altezza e background) e dovrà contenere al suo interno il menù.

// Stile generico dell'header
#header{
	height:50px;
	background:red;
	
	// Stile dei div interni del menù (figli dell'header)
	.menu{
		width:20%;
		float:left;
		height:30px;
		margin-top:10px;
		line-height:30px;
	}
}

L'alberatura del codice, permette dunque di semplificare non soltanto la scrittura dello stesso, ma anche la lettura e dunque la scalabilità.

Codice Less

Il precedente codice sarà convertito dal compilatore nella forma estesa:

// Stile generico dell'header
#header{
	height:50px;
	background:red;
}

// Stile dei div interni del menù (figli dell'header)
#header .menu{
	width:20%;
	float:left;
	height:30px;
	margin-top:10px;
	line-height:30px;
}

Immaginando strutture più estese e nidificate, questo meccanismo salva davvero la vita agli sviluppatori di front-end!

Abilitando l'opzione minify del Simpless, il codice può addirittura esser scritto e compilato su una sola riga, riducendo ancor più il peso del file e dunque il caricamento del browser.

Codice Less

Fra le funzionalità più potenti messe a disposizione del Less per quanto riguarda l'aspetto puramente di programmazione, troviamo:

  • Gestione delle variabili
  • Creazione di funzioni o mixins
  • Operazioni algebriche

Analizziamo nello specifico ognuna delle funzionalità elencate.

Codice Less

Gestione delle variabili

Ebbene si, con il codice Less è possibile introdurre il concetto di variabili all'interno del codice CSS!

Per capire la reale importanza delle variabili nella progettazione dei fogli di stile, si può pensare ad esempio ad alcune problematiche comuni:

  • Colori primari
    Dopo aver realizzato un progetto web, si richiede l'esigenza di modificarne i colori primari, per esempio dal blu al rosso. Utilizzando il CSS, questa operazione potrebbe richiedere diverse ore, in quanto occorrerebbe cercare e modificare non solo tutti i colori con codice blu, ma anche tutte le eventuali sfumature applicate.
    Grazie al Less invece, utilizzando una sola variabile, sarà sufficiente modificare il valore della stessa.
  • Layout della pagina
    Così come per i colori, modificare le dimensioni di un eventuale layout della pagina con molte strutture complesse, potrebbe richiedere molto tempo e soprattutto molti calcoli. Grazie al Less invece queste operazioni possono avvenire in pochi istanti.

Codice Less

Gestione delle variabili

Per poter definire una variabile in Less, è sufficiente:

@main_color: #ff0000;

Se si vuole dunque applicare il colore definito all'interno di un testo o come background, potremo dunque scrivere:

#testo{
	color:@main_color;
}

#contenitore{
	background:@main_color;
}

Modificando dunque il valore della variabile, il nuovo colore sarà applicato in tutte le sezioni in cui è applicato.

Codice Less

Creazione di funzioni o mixins

Un altro aspetto molto importante, è la possibilità di raggruppare righe di codice per un rapido riutilizzo (mixins) ovvero creare vere e proprie funzioni con il passaggio di valori.

// Mixin statico
.padding_default{
	padding-top: 10px;	padding-bottom: 5px;
}

// Mixin dinamico
.padding_custom(@top, @bottom) {
	padding-top: @top; 	padding-bottom: @bottom;
}

Il primo mixin imposterà di default sempre gli stessi valori di padding, il secondo permetterà invece una soluzione dinamica a seconda delle esigenze.

#contenitore-1{
	.padding_default();
}

#contenitore-2{
	.padding_custom(5px, 3px);
}

Modificando dunque il valore della variabile, il nuovo colore sarà applicato in tutte le sezioni in cui è applicato.

Codice Less

Operazioni algebriche

Un ultimo tassello molto importante del Less, è la possibilità di effettuare operazioni algebriche.

Grazie a questa funzionalità è possibile mantenere un livello di astrazione elevato del codice, e determinarne il comportamento in funzione di alcune variabili.

Questa opzione è stata fornita di per se anche dal CSS3 nativo, tramite l'integrazione della funzione calc, ma grazie al Less, ovviamente è possibile includere anche le variabili o svolgerle in maniera nativa.

@altezza:100 / 2;
@larghezza:@altezza * 2;

E' buona norma distanziare sempre l'operatore fra i valori inclusi nell'operazione.

<Thank u!>

Sempre pronto a darti una mano