Profile image
Nicola Camedda

Joomla! avanzato

  • Web Designer
  • +39 (338) 138-4195
  • contact@newweblab.net
  • newweblab
  • Italy
Less logo
In questo articolo voglio elencarti un paio di strumenti utili per lavorare con Less su sistema operativo Ubuntu.
Questo articolo ti può interessare se:
  • disegni siti Web;
  • hai intenzione di sfruttare i vantaggi di Less;
  • hai un sistema operativo (K)ubuntu 14.04 LTS... (ma può esserti utile anche se usi altri sistemi operativi);

La situazione è questa: ho appena terminato di sistemare un ambiente di sviluppo idoneo a lavorare con Less.
Così ho pensato di buttare giù due righe per elencare gli strumenti che sto utilizzando, potrebbe risultare utile a chiunque si trovi nella stessa situazione.
Personalmente sto lavorando a un sito sviluppato tramite il CMS Joomla! Ma sono certo che queste informazioni possono interessarti anche se operi con qualsiasi altra piattaforma.

In questo articolo non ti parlerò delle soluzioni che prevedono la compilazione tramite riga di comando e nemmeno tramite compilazione Javascript dal browser.
Se vuoi approfondire questi aspetti ti rimando a questi link:
Inoltre, quest'articolo potrebbe interessarti anche se usi un sistema operativo diverso da Ubuntu e derivati: i "tool" di cui ti parlerò sono multi-piattaforma, quindi probabilmente potrai scaricarli e utilizzarli senza problemi.

Cosa è Less?

Less (a volte scritto anche "LESS") è un linguaggio di fogli di stile dinamico ("dynamic style sheet language"), che può essere compilato in normali fogli di stile CSS.
L'idea alla base di Less e di altri linguaggi di stile dinamici, è quella di aggiungere tutta una serie di funzionalità assenti nei normali CSS.
Si tratta di elementi che richiamano i comuni linguaggi di programmazione, come le variabili, i "mixins" (ovvero blocchi di codice riutilizzabile), operatori e funzioni, ecc.

Uno dei maggiori vantaggi nell'utilizzo di Less e simili è quello di poter scrivere un codice più ordinato, favorendone la riutilizzazione e riducendo i tempi di sviluppo.
Con Less, ad esempio, è possibile organizzare le proprie librerie di stili utilizzando più file (ad esempio: form.less, header.less, buttons.less, variables.less ecc). Questo consente di importare solo i file utili al progetto e compilarli in unico file CSS completo.
È possibile quindi lavorare sul singolo file in modo più chiaro rispetto a quando si opera su file CSS di diverse migliaia di righe di codice.

Per saperne di più e imparare Less:

Ubuntu

Mi riferisco alla versione di Ubuntu 14.04 LTS.
Al momento sto usando questa versione, ancora ufficialmente supportata. Quindi non sono ancora passato alla successiva 16.04 LTS.
Non credo che si possano riscontrare problemi nella nuova release, ma chi può dirlo?

Note: se hai un altra versione di Ubuntu o Kubuntu, prima di installare qualsiasi cosa dovresti informarti sulla compatibilità dei pacchetti.

Editor

Per lavorare con Less serve un editor capace di evidenziare correttamente il codice.
Purtroppo, in questo caso ho dovuto abbandonare il mio amato editor Bluefish perché al momento non supporta questo tipo di sintassi.
Con l'ultima versione di Bluefish, la 2.2.8 è possibile evidenziare il codice in stile "Sass", il risultato non è perfettissimo, ma tutto sommato accettabile.
Conosci qualche plugin per Bluefish utile ad evidenziare il codice Less? O addirittura capace di compilarlo? Fammi sapere !!!

Ecco alcuni editor con cui si può lavorare con Less su (K)ubuntu:
(Ne conosci altri? fammi sapere).

Compilatori Less.

Come saprai, il codice dei file .less deve essere compilato in un normale file .css. Affinché ciò avvenga hai bisogno di un compilatore.
Ne esistono di diversi tipi, alcuni scritti in Javascript, altri in Php.
Se lavori in Wordpress, Joomla! o Drupal puoi usare uno dei diversi plugin a disposizione.

Ricordati che in genere questi plugin vanno attivati solo in fase di sviluppo del codice. Una volta terminato il tuo foglio di stile dovresti disabilitarli, per evitare inutili compilazioni automatiche del codice, che non farebbero altro che rallentare la navigazione del sito. Compila solo in seguito a modifiche degli stili in Less e ovviamente, possibilmente in locale.

Personalmente, ho integrato nel mio template in Joomla! il seguente compilatore:

Leafo Lessphp;

Funziona bene, ha anche delle funzioni capaci di compilare in automatico solo in seguito a modifiche dei file. Questo è possibile grazie all'utilizzo di file di cache.
Nella documentazione trovi del codice funzionante che puoi utilizzare tranquillamente.
Ovviamente per integrarlo nel tuo sito, occorre un minimo di competenza. 
Nel mio caso ho aggiunto una opzione nel backend del mio template che consente di attivare o disattivare la compilazione automatica.

Con poche righe di codice ho quindi integrato questo compilatore in un mio template.

Ho anche testato una soluzione alternativa, più semplice perché evita di effettuare operazioni sui file del proprio template, ho usato il plugin di Joomla! "Less Compiler":

Pagina JED - Less Compiler plugin

Utilizza lo stesso compilatore di cui parlavo sopra e in più ti fornisce diverse opzioni di configurazione che ti facilitano il lavoro.

In ogni caso, nessuna di queste soluzioni mi ha completamente soddisfatto. Ora ti spiego perché.

Browser

C'è un problema, non indifferente.
Quando vai a ispezionare il codice ti appare il numero di riga corrispondente al file compilato in CSS, a noi però interessa la riga corrispondente al file in Less, perché è su questo file che stiamo lavorando.

Affinché il browser ci consenta di ispezionare il codice del file .less è necessario compilare usando l'opzione "source map".
Ho cercato nella documentazione di lessphp ma al momento non ho trovato un supporto a source map. (Può darsi che mi sia sfuggito).

Il plugin di Joomla! offre un opzione che consente di ispezionare il file .less dal browser, ma è basata su un estensione del plugin Firebug, quindi utilizzabile su Firefox e al momento inutile su Chrome e derivati.
(Ho provato a installare questa estensione su Firefox versione 46.0.1... ma di numeri di riga corretti per il file Less ancora non se ne vedono).

Altri plugin Joomla! potrebbero aver risolto questo inconveniente, così come altri plugin in altri CMS come Wordpress, o Drupal. 
(Non appena avrò modo di testare altri plugin su Joomla! o altre piattaforme aggiornerò i contenuti di questo articolo con i risultati di tali test).

Per questo motivo ho iniziato a cercare qualche applicazione software capace di colmare questo "gap".

Koala

Koala editor

Sono andato a fare un giro fra i vari "tools" desktop e fra le varie soluzioni ho scaricato "Koala", una semplice applicazione Linux, utile a compilare i file Less.

Puoi scaricare Koala direttamente dal sito ufficiale. Sono disponibili anche versioni per Windows e Mac.

Koala è utile anche se vuoi compilare file Sass, CoffeScript, Compass, oppure per comprimere codice Css e Javascript.

Koala è un app molto semplice ed efficace, te la consiglio!
Probabilmente se usi altri sistemi operativi potresti avere maggiore scelta di software da suare, ma ti consiglio ugualmente di dare un occhiata a Koala.

Tra le varie opzioni per Less ci sono compressione e mantenimento dei commenti, ma soprattutto: il supporto a source map.

Risultato: Chrome segna perfettamente i numeri di righe dei file Less, per quanto riguarda Mozilla Firefox, ancora non ho trovato una valida soluzione.

Conclusioni

Come hai notato questo articolo è abbastanza "work in progress". In ogni caso, spero che ti sia stato utile!!!
Con lo scopo di offrirti una sempre migliore esperienza di navigazione, questo sito usa i cookies 'tecnici' e di 'terze parti'. Clicca 'Accetto i cookies' per chiudere questo banner e accettare i cookies. Per sapere come disattivarli dal browser e avere più informazioni clicca 'Informativa'. Proseguendo la navigazione acconsenti all'utilizzo dei cookies.