LESS: estendere i CSS

Nei mesi scorsi abbiamo più volte segnalato diversi tentativi e proposte per rendere i CSS più simili ai linguaggi di programmazione per emularne le funzionalità  essenziali e non previste nelle specifiche. Per citare solo due casi rimando ai post Variabili e modularità  con i CSS e Variabili CSS: perché aspettare?.

Negli ultimi giorni mi sono imbattuto in questo articolo di Sitepoint dedicato a Object Oriented CSS (OOCSS) e nella presentazione su Usability Post di LESS. àˆ su questo che mi soffermo.

Si tratta nelle parole degli autori, Alexis Sellier e Dmitry Fadeyev, di un sistema in grado di estendere i CSS aggiungendo 4 nuove funzionalità : variabili, mixins, regole annidate e operazioni. Un file .less usa di fatto la stessa sintassi dei CSS, ma deve essere compilato come documento .css attraverso una Ruby gem che può essere scaricata e installata dal sito ufficiale.

Molto interessanti e intuitivi gli snippet di codice postati per far comprendere il valore delle 4 nuove funzionalità . Partiamo dalle variabili e dall’esempio classicamente associato ad esse, quello della palette dei colori da inserire all’inizio del foglio di stile. In un CSS si farebbe così:

/* CSS */
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Con LESS così:

/* LESS */
@brand_color: #4D926F;
#header {
  color: @brand_color;
}
h2 {
  color: @brand_color;
}

Interessante anche la parte relativa ai mixins. àˆ un concetto simile a quello delle variabili, ma applicato alle classi:

/* CSS */
#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Ed ecco come risulta in LESS:

/* LESS */
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
#header {
  .rounded_corners;
}
#footer {
  .rounded_corners;
}

Insomma, potrebbe essere o no un ottimo ausilio per la scrittura di codice CSS?