3 Librerie di Mixin per LESS.js

3 Librerie di Mixin per LESS.js

Abbiamo già affrontato altre volte l'argomento LESS.js ma questo non è un buon motivo per smettere di parlarne! Questa libreria ti permette di velocizzare incredibilmente la scrittura dei tuoi fogli di stile ma, oltre a questo, ha dato il via alla creazione di un gran numero di librerie piene di utili mixin pronti da usare nei tuoi progetti! In questo articolo andremo a vedere insieme le 3 più famose e che presentano le soluzioni più interessanti.

Saper usare LESS.js è sicuramente una cosa che aiuterà il tuo lavoro da sviluppatore web, e la possibilità di creare i tuoi mixin è una caratteristica che velocizzerà la creazione degli effetti CSS3 in maniera incredibile; sopratutto perché avrai del codice compatibile anche con i browser più datati scrivendo una sola riga di codice. Ma la bellezza di questa librerie non risiede soltanto nella possibilità di crearsi da soli queste soluzioni, la vera potenza sta nel fatto che ci sono decine di sviluppatori che hanno creato le proprie librerie di mixin e che le distribuiscono gratuitamente.

In questo articolo andremo a scoprire tre di queste librerie, quelle che io ritengo migliori sia dal punto di vista storico che da quello dell’usabilità ma prima di andare oltre vorrei ricordarti che se sei interessato a conoscere meglio questa libreria puoi consultare il video corso che ho realizzato appositamente per questo scopo ed aiutarti a velocizzare il tuo lavoro.

Nelle librerie che ti andrò a presentare ci saranno diversi mixin che si assomigliano molto, basta pensare a tutte le regole CSS3 che permettono di fare delle trasformazioni, creare ombre, gradienti o qualsiasi altro abbellimento grafico possa venirti in mente con questo linguaggio. Per questo motivo ho deciso di non presentarti una ad una tutti i mixin che ciascuna libreria presente, mi prenderebbe davvero molto tempo e probabilmente non sarebbe poi così utile (nelle homepage di queste librerie troverai tutta la documentazione necessaria).

Quello che ho deciso di fare è invece presentarti quei mixin per cui ciascuna libreria sarà utile ed unica con la speranza di aiutarti a scegliere quella che faccia al caso tuo in base al progetto che devi realizzare.

3L – Lots of Love for LESS

Uno tra i mixin più interessanti che ho trovato utilizzando questa libreria è stato proprio .seo-helper(), un mixin che ti permetterà di avere un feedback instantaneo sullo stato SEO del tuo progetto web. La cosa interessante di questo mixin non è tanto il fatto che non si comporta come gli altri tool SEO che puoi trovare a giro per la rete, non sarà in grado di darti uno score o una qualsiasi valutazione della tua pagina.

Piuttosto, ti permetterà di vedere a video, direttamente all’interno del tuo browser, quali parti del tuo HTML non sono ottimizzate per la SEO. Tutti noi sappiamo che l’attributo alt di una immagine è molto importante per migliorare l’indicizzazione della pagina. Avere un titolo ottimizzato all’interno dell’elemento title è un’altra cosa fondamentale per far sapere ai motori di ricerca quale sia l’argomento trattato nella pagina, così come per il meta tag description.

Utilizzando questo semplice mixin sarai in grado di avere un aiuto direttamente dal tuo CSS e, una volta che avrai terminato di sistemare gli errori mostrati, potrai semplicemente rimuoverlo dal tuo codice LESS.js ed alleggerire nuovamente il peso dei tuoi fogli di stile.

Altri mixin veramente utili sono quelli che ti permettono di utilizzare il nuovo Flex Box (una nuova e potente tecnica per la costruzione di layout in CSS su cui torneremo a breve) e la possibilità di creare ombre multiple utilizzando un singolo mixin.

Potrai trovare questi e molti altri mixin direttamente all’interno della pagina di 3L.

ClearLess

La cosa più interessante di questa libreria è sicuramente la possibilità di creare in modo semplice degli Sprite per il proprio progetto web! Tutto quello che dovrai fare è creare la tua immagine Sprite, definire la griglia e semplicemente andare a richiamare le grafiche che ti servono all’interno degli elementi corretti.

Con queste poche righe di codice hai già preparato il tuo progetto ad utilizzare l’immagine sprite di default (definita con la variabile @sprite-image) ed hai già impostato la grandezza della griglia con @sprite-grid; con 50px stai dichiarando che ogni immagine presente al suo interno avrà questa grandezza. Successivamente potrai utilizzare il mixin .sprite() andando ad indicare l’immagine di tuo interesse indicando la posizione sull’asse X e Y, un pò come giocare alla battaglia navale :D

Altra caratteristica davvero interessante sono i mixin che sono stati creati per permetterti di utilizzare le icone. Grazie a ClearLess avrai un gran numero di mixin pronti ad aiutarti in questo processo, tutto quello che dovrai fare è indicare quale immagine vuoi usare come icona e le sue dimenzioni! Esistono altri parametri opzionali, ma già con questi tre sarai pronto a vedere le tue icone prendere vita nel tuo progetto con una sola riga di codice!

LESSHat

Questa è forse la più completa collezione di mixin presente sul web. Nonostante non presenti nessuno dei mixin che abbiamo appena visto questa è l’unica collezione di mixin che, sotto certi aspetti, fa addirittura le scarpe alla concorrente Compass (per Sass) permettendoci di andare a creare un gran numero di effetti utilizzando pochissime righe di codice!

Il loro mixin di battaglia è quello che ti permette la realizzazione di gradienti, con il quale potrai creare qualsiasi tipo di sfumatura tu desideri utilizzando una sola riga di codice:

L’esempio che vedi qua sopra è stato preso direttamente dalla homepage del progetto e ci mostra come sia possibile creare complesse sfumature, che in questo caso presentano anche una immagine, andando ad utilizzare una singola riga di codice.

Esistono altri mixin interessanti e degni di nota all’interno di questa libreria ma dato che sono a stretto contatto con le regole CSS ti consiglio di andare a consultare direttamente la sua homepage.

Conclusioni

Non ho scritto questo articolo per dichiarare un vincitore ma semplicemente per farti conoscere le potenzialità della libreria LESS.js e della comunità di sviluppatori che quotidianamente lavora al progetto e cerca di semplificare le nostre vite. Sono sicuro che esistono molte altre librerie di mixin sparse per il web e magari ce ne saranno alcune che hanno delle caratteristiche ancor più interessanti!

Tu ne conosci qualcuna? Ti andrebbe di segnalarle all’interno dei commenti in modo che anche gli altri lettori di questo blog possano conoscere altre interessanti librerie?

Da parte mia, se sei curioso di conoscere come utilizzare al meglio LESS.js ti ricordo che puoi apprendere tutto quello che c’è da sapere sul mio corso che verrà mensilmente aggiornato andando ad aggiungere nuovi video che ti permetteranno di padroneggiare al meglio questa libreria e le sue caratteristiche!

Lascia il tuo Pensiero