Less: meno codice CSS, più funzioni!

LESS: più CSS con meno codice!

Come programmatori di pagine web, cerchiamo sempre di usare il codice al meglio delle sue potenzialità; se usiamo i Css ma vorremmo avere qualcosa di più potente sotto le mani, ma comunque ci garantisca compatibilità coi i browser più diffusi, senza dimenticare l’odiato Internet Explorer…

Less Leaner Css – è un pre-processore di Css che espande le regole css tradizionali ed aggiunge ad essi nuove funzioni, rendendoli più potenti e più snelli da scrivere.

Less nasce come RubyGem ma non dobbiamo preoccuparci se non abbiamo familiarità con Ruby, perché è anche disponibile per Php e .Net .

Le variabili permettono di specificare dei valori usati molte volte in un singolo passaggio, e poi essere usate nello stile css richiamandole, rendendo il cambiamento di valori globali facile come cambiare una sola riga di codice.

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

I “mescolamenti” (mixins) permettono di inserire tutte le proprietà di una classe dentro ad un’altra classe semplicemente includendone il nome come fosse una proprietà. Come le variabili, ma per classi intere!
Questi possono comportarsi come delle funzioni, e prendere argomenti, come nell’esempio sotto…

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}

Regole nidificate
Piuttosto che scrivere lunghissimi nome dei selettori si possono nidificare i selettori dentro altri selettori; questo rende l’eredità delle proprietà più semplice ed intuitiva.

#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}

Operazioni
Alcuni elementi nei tuoi fogli di stile sono proporzionati ad altri elementi?
Le “operazioni” ti consentono di sommare, sottrarre, dividere e moltiplicare i valori e i colori delle proprietà, dandoti il potere di creare complesse relazioni tra le varie proprietà.

@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}

Molto presto vedremo la prossima generazione di Less. Ci saranno cambiamenti maggiori rispetto a quelli fatti in ogni versione precedente perché ora Less è stato re-implementato in Javascript.
Questo significa che non sarà più necessario un linguaggio lato server come Ruby, Asp o Php per usare Less, ma solo il browser.

Less.js è quindi la versione Javascript di Less per Ruby.
Come per ogni javascript basta includerne il codice nel file Html e basta! Less processerà direttamente il codice less senza dover richiamare un file Css per la pre-compilazione.

Sui browser che implementano Html5, Less.js memorizzerà in nella memoria locale il codice Css generato, a favore della velocità di esecuzione.

Non è ancora disponibile una versione ufficiale di Less.js, ma la versione “lavori in corso” è disponibile nel repository (deposito) di Github e Google Code.

Prima di tutto bisogna inserire la solita riga di codice nell’Head della pagine html; poi, per usare il codice “Less”, bisogna includere il file .less come fosse un file .css ma avendo l’accortezza di inserire la proprietà rel=”stylesheet/less” in modo che il compilatore Less sappia che quello è un file di cui deve occuparsi!

Basta assicurarsi – almeno – di inserire il Javascript dopo la chiamata al file .less .

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="https://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Infine, c’è una caratteristica che in fase di progettazione può risultare moooolto utile, e fa in modo che il Css venga ricaricato ogni volta che il file Less viene salvato con delle modifiche; basta usare questo codice qua:

<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>

link: Less.js Will Obsolete CSS , Less

Se vi piacerebbe usare Less ma vi dispiace produrre dei file incompatibili con il normale codice Css, allora potete usare un piccolo software gratuito che converte i file Less inormali file Css.

Il programma in questione si chiama SimpLESS, ed è disponibile per Windows, mac OsX e Linux.

link: SimpLESS

http://www.youtube.com/watch?v=Y5kSORabDwE

LessPhp

Se volete avere uno strumento ancora più compatibile con il normale codice Css, potete “tradurre” il codice Less direttamente nel server Apache in modo che al browser arrivi del Css standard.

LessPhp è un compilatore per Less scritto in Php.
Il compiler è distribuito in un unico file e basta includerlo in una pagina Php per poterlo usare:

require 'lessc.inc.php';

…e poi dare le dovute istruzioni per la “traduzione” di un file Less in file Css:

lessc::ccompile('input.less', 'output.css');

In questo modo potete scrivere dei file Less usando il normale codice Css oppure usando il codice Less, e poi lasciare al compiler il compito di creare del codice compatibile con gli standard attuali.

link: LessPhp

Less per WordPress

Sotto forma di plugin, Less è disponibile anche per WordPress.

Css2Less

Css2Less è un servizio web gratuito per convertire il normale codice Css in codice css Less.
Basta copiare-incollare il nostro stile nella parte sinistra dello schermo, ed automaticamente avremo il codice Less pronto per l’uso nella parte destra.

link: Css2Less

Altri sono arrivati qui cercando:
codici css, taroccare contatore acqua, codice css.

2 pensieri su “Less: meno codice CSS, più funzioni!”

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.