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.
