Chi sviluppa per web, certamente tante volte avrà desiderato che anche i fogli di stile potessero rispondere a delle condizioni, uscendo dalla loro staticità. Ebbene, c’è chi l’ha presa di punta ed ha creato LESS, una soluzione basata su javascript, in grado di generare dinamicamente i dati relativi alla formattazione.
Per iniziare ad usare LESS, è necessario scaricare, copiare e linkare il js dedicato –less.js– all’interno dell’header della pagina interessata. La fase successiva sarà scrivere quanto si deve, seguendo alcune semplici regole, deducibili con grande facilità dalla chiara documentazione in inglese fornita sul sito del progetto.
Con LESS potrete quindi dichiarare variabili per identificare alcuni valori, in modo da poterne disporre dove preferite.
Ad esempio, volendo impostare un colore, in modo da non doverne riscrivere il valore esadecimale ogni volta, basterà scrivere in questa maniera
@color: #4D926F;
#header{
color: @color;
}
h2{
color: @color;
}
Altra grande caratteristica è la possibilità di dichiarare delle funzioni. Nell’esempio seguente, un modo di specificare il border radius (bell’effetto un po’noioso da riscrivere ogni volta…) risparmiando tempo e fatica.
.rounded-corners (@radius: 5px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(10px);
}
una volta dichiarata la funzione, sarà possibile richiamarla effettuando l’overriding del valore di default, in maniera semplice e intuitiva.
Ma non è finita.
LESS, consente di annidare regole
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
…di effettuare operazioni, quali ad esempio scalare dei valori in maniera proporzionale: caratteristica utilissima per tenere sotto controllo lo schema colori del sito.
@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%);
}
Come già visto implicitamente per le funzioni, è possibile generare pseudoclassi per richiamarle come insiemi di valori per altri tag, div, o pseudoclassi stesse.
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
E’ inoltre possibile ottenere effetti, come il fading da un colore ad un altro…
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}
…utilizzare “guardie” ovvero delle condizioni in presenza delle quali alterare le regole di visualizzazione
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
ma anche un set di funzioni per riconoscere il tipo di dato, grazie alle quali è possibile formattarlo diversamente senza doverlo circoscrivere i altri marcatori.
- isnumber
- isstring
- iskeyword
- isurl
Di tutto di più insomma.
Se volete approfondire, visitate il sito ufficiale.
