LESS the dynamic stylesheet language

LESS è un semplicissimo linguaggio creato da Alexis Sellier per rendere dinamici i CSS grazie all’implementazione di variabili, funzioni, espressioni e annidamenti. Facilita di molto lo sviluppo e la manutenzione di CSS molto articolati. Per utilizzarlo basta includere nelle pagine web oltre al file style.less(potete chiamarlo come vi pare) che conterrà il sorgente scritto da voi in less anche il file javascript che lo trasformerà in un file CSS e lo integrerà nella pagina.

<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.min.js"></script>

Non preoccupatevi di dover imparare molte cose per poterlo utilizzare, un file CSS viene già compilato correttamente da LESS e vi basterà apportargli qualche modifica per sfruttarne le potenzialità.

Ora un esempio molto veloce e non esaustivo di quello che LESS può fare:

@arancio: #ebac20;
@rosso:   #d84227;
@larghezza:  20px;
@url-base:     "http://dominio.it/images/";

.rounded-corners (@radius: 5px) { 
   border-radius: @radius; 
   -webkit-border-radius: @radius; 
   -moz-border-radius: @radius; 
}

.box{
    border: 2px solid @rosso;
    background: url("@{url-base}logo.png") 0 0 no-repeat @arancio;
    .rounded-corners(20px);
    p { width: @larghezza * 2; }
}

Questo codice LESS produrrà il seguente codice CSS:

.box {
    border: 2px solid #d84227;
    background: url("http://dominio.it/images/logo.png") 0 0 no-repeat #ebac20;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.box p {
    width: 40px;
} 

Come potete vedere se per esempio utilizzate il colore arancio 50 volte nei vostri CSS ma un giorno vi svegliate e volete cambiare leggermente tonalità vi basterà cambiare il valore alla variabile @arancio senza dover utilizzare find and replace.

.rounded-corners (@radius: 5px) invece è un esempio di funzione che accetta come paramentro un numero di px (di default saranno 5) e semplifica il codice invece di dover ripetere tutte le volte le tre direttive per i bordi arrotondati per ogni browser.

Per evitare di dover scrivere per esteso tutti i percorsi CSS è possibile annidare i vari marcatori e LESS ve li scriverà automaticamente per esteso come nell’esempio p è descritto all’interno di .box.

Queste sono le principali caratteristiche, ma LESS ne mette a disposizione molte altre come gli @import, le operazioni, alcune funzione di javascript, funzioni sui colori, namespace e scope. Per scoprirle vi rimando alla pagina ufficiale da cui potete anche scaricare l’unico file che vi serve per cominciare ovvero less.min.js.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>