Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Io mentre codificavo fogli di stile, e poi dovevo cambiare tutti margin da 2 a 3, ho rimpianto la possibilità di non poter utlizzare le variabili, e a quanto pare non sono stato l’unico.
 
Infatti qualcuno deve aver sofferto molto più di me, a tal punto da mettersi all’opera e creare un linguggio ad hoc.
Questo linguaggio si chiama LESS ed è sviluppato in javascript, ancora non l’ho testato, ma guardando la pagina del progetto devo dire che sembra promettere veramente bene.

Oltre all’utilizzo di varabili, LESS consentirà il Mixins, ossia la definizione delle regole di un elemento, ad esempio una classe, facendo riferimento ad un oggetto precedentemente definito, in parole povere potremmo fare ereditare le caratteristiche della classe a alla classe b, semplicemente citando .a all’interno della definizione di b.
 
Altra cosa molto interessante sarà la possibilità di definire regole annidate. Ad esempio si potrà scrivere:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

 
Che produrrà il seguente codice:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

 
Altra caratteristica di LESS è quella di mettere a disposizioni delle funzioni per la manipolazione dei colori e operazioni su colori e dimensioni.
Nel codice che segue si può notare la definizione di variabili (le prime 3 righe che iniziano con @), operazioni su colori e dimensioni e l’utlizzo delle funzione desaturate

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

 
Scrivere CSS dinamici con LESS LESS può essere esegutio sia client side (IE 6+, Webkit, Firefox), che server side, mediante Node.js.
Per scaricare lo script javascript di LESS, per maggiori informazioni sull’istallazione della libreria e per la lista di tutte le funzionalità vi invito a visitare il sito ufficiale del progetto: http://lesscss.org.

Twitter