Una sola pagina web per descrivere le caratteristiche di questo preprocessore CSS che permette di rendere dinamici i fogli di stile. LESS , come Sass , estende le funzionalità di CSS implementando variabili, mixin, operazioni e funzioni. LESS funziona sia lato Server ( Node.js e Rhino ) sia lato Client ( solo con i più moderni browser ) .
Iniziare ad usare LESS
L’installazione e la compilazione sono molto semplici e sono sufficienti appena due righe di codice
npm install -g less lessc styles.less styles.css
Variabili
Le variabili permettono di specificare valori ripetitivi in un unico posto ( una variabile); quindi essendo riutilizzabili ed inoltre permettendo di cambiare il foglio di stile in maniera semplice.
@coloreazienda = #5F9EA0; a { color : @coloreazienda; } nav { background-color: @coloreazienda; }
Mixin
I mixin permettono di inserire le proprietà di una class all’interno di un’altra classe. Funzionano come le variabili ma per una serie di proprietà. I mixin possono comportarsi anche come funzioni e quindi accettare argomenti.
.default-type (@size: 14px) { margin-bottom: 20px; font-size: @size; line-height: 1.5; } p { .default-type; } footer { .default-type(12px); }
Come proseguire
Come avete visto utilizzare LESS è immediato ed intuitivo, molte altre caratteristiche le trovate sulla pagina ufficiale; inoltre potete contattarci per assistenza e sviluppo di qualsiasi progetto anche esistente.