10 Librerie Sass che ti Aiutano nello Sviluppo CSS

Eccoci ancora una volta a parlare di Sass. Ormai dovresti aver capito il nostro interesse nel migliorare il tuo lavoro e nel proporti soluzioni e tecniche che ti permetteranno di svolgerlo più velocemente e con maggior precisione.

Come avrai forse intuito dallo stesso titolo, quest’oggi non andremo a parlare tanto di tecniche ma piuttosto di soluzioni. Soluzioni che altri sviluppatori hanno creato e condiviso con noi e che rappresentano degli approcci davvero interessanti.

Se ancora non conosci Sass ti dico subito che stai facendo un grosso errore!

Stai facendo un errore perché ad oggi scrivere i tuoi CSS così come sono stati standardizzati dal W3C è una grossa perdita di tempo. Per quanto sia utile questo approccio, bisogna dire che la sua sintassi e la sua logica non riesce più a mantenere il passo con i tempi. Non mi credi? Prova intanto a dare un’occhiata al nostro webinar e al corso che abbiamo realizzato per capire in quanti modi utilizzare Sass è più utile (e veloce) rispetto allo scrivere del classico CSS.

Ti invito a consultare le nostre risorse esterne perché quest’oggi non ho intenzione di presentarti questa soluzione, piuttosto il mio compito in questo specifico articolo è quello di mostrarti quanto sia cresciuta la comunità intorno a Sass; i suoi framework e le librerie disponibili a tutti gli sviluppatori che hanno iniziato ad usare questa tecnologia.

Ecco perché prima di scrivere questo articolo mi sono messo a cercare in lungo e in largo nella fitta rete che è Internet alla ricerca di articoli e repository GitHub contenenti intelligenti soluzioni che il linguaggio Sass ha permesso di sviluppare.

Quella che troverai qua sotto è una lista delle dieci librerie (o framework) che ho trovato più interessanti e che ho pensato che valesse la pena di elencare. Ti dico subito che se in questo elenco non trovi una delle soluzioni che tu usi con più piacere non esitare a farmelo notare aggiungendo il link e la motivazione all’interno della sezione commenti che troverai in fondo a questo articolo.

Prima di iniziare vorrei dirti che in questo articolo, piuttosto che inserire i vari link che puntano al file .zip contenente le singole soluzioni, ho preferito inserire i link ai singoli repository GitHub in modo da permetterti di utilizzare ancora più facilmente queste soluzioni.

È già due volte che citiamo GitHub ma visto che su questo articolo non lo abbiamo mai menzionato troppo spesso mi sento in dovere di chiederti: conosci Git?

Se la tua risposta è no puoi sempre seguire il nostro corso gratuito che ti porterà a padroneggiare gli strumenti base di questa ottima soluzione che è stata creata da Linus Torvalds (il padre di Linux per i non addetti ai lavori) e che permette a migliaia di sviluppatori di condividere il proprio codice e tracciarne le modifiche attraverso un CVS (Control Version System).

Inverti gli Elementi di un Sito con Bi-App

Ho deciso di inserire la libreria Bi-App come prima perché il suo funzionamento è tanto semplice quanto interessante. Ti è mai capitato di dover sviluppare un sito che sia consultabile sia per chi legge da sinistra verso destra (left-to-right) e viceversa (right-to-left)?

Se il tuo mercato si riferisce principalmente a quello italiano molto probabilmente non è una cosa che è accaduta molto spesso ma sono sicuro che questa soluzione potrebbe tornare molto comoda per tutti gli sviluppatori che si trovano a realizzare portali di grosse dimensioni. Dico questo perché grazie a Bi-App avrai la possibilità di creare due fogli di stile che permettono di fare proprio questo.

Dal punto di vista dello sviluppatore non cambia assolutamente niente, tu sarai libero di scrivere un singolo file Sass e nel momento della compilazione questa libreria utilizzerà i Mixin che hai utilizzato per fare automaticamente tutte le operazioni di mirroring al posto tuo, l’unica cosa che ti resterà da fare è richiamare il file CSS appropriato a secondo della geolocalizzazione del visitatore :D

Aggiungi Effetti alle tue Immagini con SassMatic

Se devo essere onesto con te, la prima volta che mi sono trovato di fronte a questa libreria credevo che fosse una di quelle tuttofare ma invece mi è bastato controllare il suo sito per scoprire che il suo obiettivo è uno soltanto: applicare filtri alletue immagini.

sassmaster

Come puoi vedere dall’immagine che ti ho appena mostrato, gli effetti che puoi realizzare con questa semplice libreria sono veramente molti e sarai in grado di creare degli effetti incredibilmente interessanti! Una cosa che mi ha fatto molto piacere è che questa libreria non utilizza mixin per la realizzazione di questi effetti ma piuttosto utilizza la proprietà %extendche addirittura permette di creare un CSS ancora più pulito. Ti consiglio proprio di dare un’occhiata a questo progetto e di utilizzarlo se hai in progetto di realizzare un’applicazione web che fa largo uso di immagini.

Tutti i bottoni che vuoi con… Buttons

I bottoni sono degli elementi che risultano essere incredibilmente importanti in qualsiasi progetto web. Sono talmente importanti che alcune volte sono in grado di delineare i successi e gli insuccessi delle conversioni di un’azienda. Proprio per questo e molti altri motivi mi sono trovato spesso a desiderare un tool che mi permettesse di creare e modificare questi tipi di elementi in modo incredibilmente veloce.

buttons2

Purtroppo molti anni fa l’unica soluzione era quella di affidarsi a un programma di grafica, o anche a un grafico di professione, e doversi poi caricare i vari file immagine per poter personalizzare il nostro layout. Quello che vedi qua sopra è solo un piccolo esempio di quello che puoi realizzare con questa libreria e la cosa ancor più bella è che ogni singolo bottone viene realizzato interamente con CSS3, una cosa fantastica sopratutto se pensiamo anche alle prestazioni dei nostri siti web!

Gestire le Media Query con BreakPoint

Partiamo già dal fatto che il nome di questa libreria viene ispirato all’omonimo film con Keanu Reeves, giusto per attrarre i surfisti in ascolto e soltanto con questo potrei dire che ha vinto rispetto alle altre, ma se andiamo ad indagare più da vicino sulle caratteristiche di questa libreria potremmo scoprire che è ancora più interessante!

In effetti è la prima soluzione che incontro che permette di inserire le media query direttamente all’interno del selettore che stiamo utilizzando. Quindi, al posto di dover organizzare tutto il nostro codice in modo da rispettare la chiamata @media all’interno del nostro codice sarai in grado di gestire le varie opzioni del responsive direttamente mentre scrivi le tue regole CSS.

Cerchiamo di fare un piccolo esempio per comprendere il suo funzionamento. Per prima cosa abbiamo la possibilità di creare delle variabili che saranno più semplici da ricordare e richiamare al posto del classici px:

Spero che grazie ai commenti inseriti il codice sia di facile comprensione anche se puoi sempre utilizzare i commenti se hai bisogno di chiarirti qualche dubbio ;)

Quello che abbiamo fatto con il codice precedente è definire i limiti di azione delle nostre future media query, i vari breakpoint ;) Tutto quello che resta da capire è come sia possibile utilizzare questa soluzione all’interno del nostro codice. Vediamo subito un esempio calzante.

Come puoi vedere con i tuoi stessi occhi, a comferma di quanto detto precedentemente, utilizzando questa libreria non avrai la necessità di dover creare singolarmente le media query e di ripetere i selettori dei tuoi elementi al suo interno; tutto quello che devi fare è inserire il mixin breakpoint all’interno dell’elemento e scrivere le modifiche necessarie. Sono sicuro che adesso ti stai chiedendo come verrà sviluppato il foglio CSS risultante, studiamolo assime:

Ed ecco che, una volta compilato il nostro codice Sass, avremo a disposizione le singole media query e i selettori che rispondono a tale misura verranno spostati al suo interno. In quest’ultima frase ho utilizzato il plurale perché grazie a Sass non dovremo preoccuparci di quante media query vengono create, probabilmente starai pensando che il CSS generato sarà un casino con moltissime media query ripetute a giro per il documento.

Invece grazie a Sass possiamo dormire sonni tranquilli perché sarà in grado di “spostare” i vari selettori all’interno delle media query adeguate senza andare ad appesantire inutilmente il CSS risultante.

Anima i tuoi Elementi con Saffron

Ormai dovresti essere abituato ai nostri articoli e continui richiami nei confronti degli effetti di animazione che puoi creare con il tuo codice, ma in questo contesto ti voglio presentare una libreria che ti permetterà di utilizzare una serie di effetti già confezionati. Se sei un assiduo lettore del nostro blog ti dovresti ricordare che non troppo tempo fa abbiamo parlato di Animate.css, un semplice insieme di classi CSS che ti permettono di animare facilmilmente i tuoi elementi.

Ma con Saffron stiamo prendendo un approccio differente e anche molto più personalizzabile. Come spesso accade quando lavoriamo con Sass questa soluzione permette di avere un alto grado di personalizzazione sia lato codice che negli effetti veri e propri.

saffron

Quelle che vedi sono soltanto una piccola selezione delle animazioni in entrata che potrai attivare grazie a questa libreria. Ti ho inserito questa immagine perché vorrei farti capire che per ogni animazione è presente un mixin; questo ti permetterà di generare dei fogli di stile più leggeri selezionando soltanto gli effetti che desideri. Oltre a questo, grazie proprio a questa struttura, ti sarà più semplice contribuire all’interno del repository GitHub andando a pushare soltanto le animazioni che avrai creato.

Migliora il ritmo verticale con TypeSettings

Riflettiamo per un attimo, in molti ci ricordano che sul web Content is King ma se questo contenuto non è facilmente consultabile da parte dei nostri lettori, come facciamo a dargli tutta questa importanza? Tutti gli sforzi che facciamo nella creazione del nostro contenuto verranno semplicemente sprecati!

typesettings

Ecco che una libreria come Typesettings viene in nostro soccorso offrendoci una serie di mixin che ci permette di gestire al meglio lo spazio verticale che intercorre nel nostro testo. Questa può sembrare una cosa da poco ma ti invito a controllare il semplice codice di configurazione per scoprire tutto il lavoro che ti verrà semplificato grazie all’integrazione di questa libreria!

Griglie Verticali con SassLine

Devo confessarti che a prima vista questa libreria può sembrare molto simile alla precedente, in fin dei conti anche lei si occupa di realizzare delle griglie verticali per poter gestire al meglio il ritmo dei tuoi testi ma ad essere onesto, durante le fasi di test, ho trovato incredibilmente utile la possibilità di visualizzare la griglia che stavo generando.

sassline

Con l’immagine che ti ho appena inserito volevo mostrarti la semplicità di utilizzo. Ad ogni modifica avrai la possibilità di visualizzare la griglia e osservare nel dettaglio il ritmo verticale della tua pagina.

Griglie Responsive grazie a Susy

Passiamo dalle griglie verticali a griglie ancora più interessanti, quelle che permettono di creare il layout della tua pagina web. Abbiamo già analizzato Susy all’interno del corso dedicato a Sass presente su skillsAndMore all’interno del quale ti ho mostrato quanto sia semplice da configurare e da utilizzare.

Lasua caratteristica più interessante è il fatto di poter gestire sia la griglia che le modifiche responsive del tuo layout con dei mixin semantici! Praticamente non avrai più bisogno di dover utilizzare dei nomi senza senso e neanche ti dovrai sbattere a calcolare le larghezze da utilizzare con la tua calcolatrice. Grazie a Susy non dovrai far altro che creare la tua Sass Map, in grado di definire le basi del layout per il tuo progetto, e potrai delegare tutta la complessità ai mixin di questa soluzione.

Vai a scoprire il progetto su GitHub e approfondisci la sua conoscenza all’interno del nostro corso ;)

Scut, una raccolta di Utility per i tuoi CSS

Passiamo dalle librerie dedicate a una singola soluzione ad altre che ti permettono di fare un po’ tutto. Scut è una soluzione incredibilmente interessante perché oltre ai mixin ci mette a disposizione anche delle funzioni che ci facilitano alcuni compiti.

Ti è mai capitato di dover creare un progetto in em o rem per il quale avevi a disposizione soltanto un file Photoshop? Sono sicuro che sei diventato matto a calcolare le varie corrispondenze.

Ebbene, grazie a Scut tutto questo sarà un lontano ricordo perché offre le funzioni px-to-em e px-to-rem che fanno proprio questo! Ovviamente al suo interno troverai anche dei mixin utili che, ad esempio, ti permettono di poter creare dei cerchi o triangoli con del semplice codice Sass.

Ti consiglio caldamente di dare un’occhiata a questa soluzione perché offre utili strumenti anche per la gestione del layout delle tue pagine.

Un Compass Completo e Avanzato

Terminiamo questa lista di librerie con quella che forse è la più completa e utilizzata, è anche quella che abbiamo scelto di analizzare all’interno del nostro corso Sass e che permette di facilitare la creazione di moltissimi effetti CSS che altrimenti ci farebbero perdere un sacco di tempo!

Come potrai vedere dal repository presente su GitHub, il codice che compone questo progetto è veramente molto, ma al tempo stesso ti permette di personalizzarlo come meglio credi senza offrire soluzioni pronte all’uso che potrebbero risultare limitanti.

La cosa che mi è piaciuta più di tutte è come sia semplice poter creare delle immagini sprite ma ci sono altre caratteristiche interessanti che vale la pena di menzionare. Una fra le tante è il fatto che questa è una delle poche librerie che offre un mixin per le animazioni CSS, ma anche che è l’unica a implementare FlexBox non è una cosa da farsi scappare.

Conclusioni

Ebbene con questo articolo abbiamo visto alcune delle soluzioni più interessanti che, grazie a Sass, potrai integrare e utilizzare nel tuo lavoro di tutti i giorni. Abbiamo visto più o meno tutte le utility che ci permettono di velocizzare la creazione dei nostri progetti ma ci tengo a dirti fin da ora che non abbiamo visto tutto!

Ci sono altre librerie che non ho messo in evidenza in questo articolo, come Burbon per esempio che non utilizzo personalmente (in fin dei conti abbiamo Compass che in mia opinione è un’alternativa migliore). Quella che mi dispiace più di tutti non averti presentato nel dettaglio è Effeckt, ma l’ho fatto perché gli stessi autori dicono che non è ancora pronta, anche se presenta degli effetti e delle soluzioni da paura!

Quello che ho voluto fare con la stesura di questo articolo è che conoscere Sass è veramente importante per il tuo lavoro, in fin dei conti è diventato quasi uno standard! Se devi metterti in pari e vuoi scoprire al meglio questa soluzione non posso fare a meno di ricordarti che abbiamo realizzato un corso appositamente per te, spero che lo troverai utile e che migliorerà veramente il tuo lavoro; proprio come ha fatto per il sottoscritto.

Sepoi hai altre librerie che usi quotidianamente e delle quali mi vuoi parlare, non esitare a farlo sfruttando i commenti che trovi qua sotto, io e gli altri lettori di html5AndMore te ne saremo infinitamente grati!

Lascia il tuo Pensiero