10 librerie Sass che ti aiutano nello sviluppo CSS

Oggi non parleremo di tecniche ma di soluzioni. Soluzioni che altri sviluppatori hanno creato e condiviso con noi e che rappresentano degli approcci davvero interessanti nello sviluppo dei nostri CSS.

Se ancora non conosci Sass ti dico subito che stai facendo un grosso errore e mi offri la possibilità di sponsorizzare il mio corso dedicato 😂

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 ed essenziale partire dalle basi, bisogna dire che la sua sintassi e la sua logica non riesce più a mantenere il passo con i tempi.

Non mi credi?

Guarda il nostro webinar per capire in quanti modi utilizzare Sass è più utile (e veloce) rispetto allo scrivere del classico CSS.

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, ho preferito inserire i link ai singoli repository GitHub in modo da permetterti di utilizzare ancora più facilmente queste soluzioni.

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 hai fatto 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 adattare il tuo contenuto in base al verso di lettura del tuo utente.

Dal punto di vista dello sviluppatore dovrai soltanto utilizzare i mixin di questa libreria, 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 😀

Tutti i bottoni che vuoi con… Buttons

I bottoni sono degli elementi 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 aiutasse a crearli e modificarli velocemente. Per fortuna mia ho incontrato Buttons!

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.

Oggi invece possiamo utilizzare direttamente il CSS e creare diverse versioni del pulsante utilizzando la stessa sintassi HTML.

Quello che vedi qua sopra è solo un piccolo esempio di quello che puoi realizzare con questa libreria ma ti consiglio di consultare il progetto perché sono sicuro che troverai il tipo di bottone che risponde meglio alle tue esigenze!

Gestisci le tue media query facilmente con @include-media

Partiamo subito dicendo che questa libreria è nata da un’attenta analisi di librerie che erano già presenti sul mercato e viene motivata la sua creazione all’interno di un completo articolo su CSS-Tricks.

Esistono alternative!

All’interno di questo articolo ti presento la libreria @include-media ma come scoprirai dallo stesso articolo che ti ho appena presentato, esistono molte alternative.

Una caratteristica che apprezzo moltissimo in questa libreria è la possibilità di inserire le media query direttamente all’interno del selettore che stiamo utilizzando.

Quindi, al posto di dover organizzare tutto il nostro codice per rispettare la chiamata @media possiamo gestire le varie opzioni responsive mentre gestiamo le regole CSS di uno specifico elemento.

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:

$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);

Come puoi vedere la dichiarazione dei vari breakpoint è molto intuitiva e sfrutta le Sass Data Map, argomento che abbiamo già trattato in un precedente articolo.

Ma torniamo all’uso di questa semplicissima libreria, una volta definiti i nostri breakpoint siamo in grado di richiamare le nostre media query singolarmente:

@include media(">phone", "<=tablet") {
    width: 50%;
}

Come dicevo prima la cosa più bella è scrivere le nostre media query direttamente all’interno dell’elemento che stiamo personalizzando.

Ecco un esempio:

.box{

  @include media(">phone") {
    background-color: red;
  }

  @include media(">tablet") {
    background-color: green;
  }

  @include media(">desktop") {
    background-color: blue;
  }

}

Come puoi vedere con i tuoi stessi occhi, a conferma di quanto detto precedentemente, utilizzando questa libreria non avrai la necessità di creare singolarmente le media query e di ripetere i selettori dei tuoi elementi al suo interno.

Tutto quello che devi fare è inserire il mixin media 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:

@media (min-width: 321px) {
  .box {
    background-color: red;
  }
}
@media (min-width: 769px) {
  .box {
    background-color: green;
  }
}
@media (min-width: 1025px) {
  .box {
    background-color: blue;
  }
}

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.

Preoccupato per il numero di media query?

Se la quantità di media query presenti all’interno del tuo file CSS ti preoccupa potresti dare un’occhiata a questo pacchetto npm la cui unica funzionalità è quella di raggruppare tutte le media query inserite nel progetto.

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 al pacchetto npm appena presentato 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.

Crea animazioni keyframe facilmente con Kf

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 pronti all’uso.

Se sei un assiduo lettore del nostro blog ti dovresti ricordare che non troppo tempo fa abbiamo parlato diAnimate.css, un semplice insieme di classi CSS che ti permettono di animare facilmilmente i tuoi elementi.

Ma con Kf stiamo prendendo un approccio differente e 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.

Questa libreria ci permette di utilizzare un’innovativa sintassi per la realizzazione dei nostri effetti, sintassi che risulta essere molto più semplice da gestire rispetto al classico@keyframes.

.single-selector div {
  $animation-map: (
    margin-left: (0ms: 0%, 3000ms: 100%)
  );

  @include kf($animation-map);
}

Anche questa libreria, come la precedente dedicata alle media query, utilizza le Data Map che risultano molto interessanti e come puoi vedere, ci permettono di dichiarare delle animazioni anche per singole proprietà.

Ovviamente non sei obbligato a selezionare soltanto un elemento, potresti selezionare gli elementi contenuti ed animarli singolarmente:

.multiple-selectors {
  $animation-map: (
    '.a': (margin-left: (0ms: 0%, 3000ms: 100%)),
    '.b': (margin-left: (0ms: 100%, 2000ms: 0%))
  );

  @include kf($animation-map);
}

Insomma sicuramente si tratta di una libreria diversa da quelle copia/incolla come per esempio Animate.css però se guardiamo l’altro lato della medaglia scopriamo un altissimo livello di personalizzazione e una profonda gestione sulle nostre animazioni.

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!

Ecco che una libreria come Typesettings viene in nostro soccorso offrendoci una serie di mixin che ci aiutano a gestire al meglio lo spazio verticale presente 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 ma ad essere onesto, durante le fasi di test, ho trovato incredibilmente utile la possibilità di visualizzare la griglia che stavo generando.

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 dove ti ho mostrato quanto sia semplice da configurare e da utilizzare.

La sua 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 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.

Susy si è aggiornato!

Susy ha raggiunto la versione 3 e adesso, al posto di utilizzare i float, ci permette di dichiarare facilmente le nostre CSS Grid o strutturare il layout con Flexbox.

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 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.

Separatori angolari con Angled Edges

Esistono sicuramente molte soluzioni che ci permettono di creare degli elementi storti all’interno delle pagine web che creiamo.

In alcuni casi vengono usate direttamente immagini in SVG che si adattano bene alle varie risoluzioni degli schermi mentre altre soluzioni utilizzano gli pseudo-elementi ::before e ::after.

Non conosci gli pseudo-elementi?

Leggi subito il nostro articolo dedicato e scopri in quanti modi questi possono aiutarti durante lo sviluppo!

Per applicare un effetto come quello mostrato nell’immagine precedente non devi far altro che usare il mixin dedicato. Ecco un esempio:

@include angled-edge($location, $hypotenuse, $fill);

Grazie a questa sintassi vengono create delle immagini SVG che vengono inserite all’interno del CSS grazie a data:image, una soluzione che ci permette di creare le immagini leggendo il codice SVG inserito.

Ti consiglio di provare questa libreria perché con un semplice mixin ci aiuta a creare accattivanti soluzioni per i nostri layout.

Bourbon, una libreria piena di sorprese!

Ti confesso che uso raramente questa libreria, ero un grande fan di Compass ma da quando sono venuto a conoscenza dell’interruzione nel suo sviluppo ho iniziato a cercare alternative.

Sono entrato in un vero e proprio universo perché in molti hanno cercato di colmare il vuoto lasciato da Compass ma in Bourbon ho trovato tutto quello che cercavo.

Infatti Bourbon è una libreria incredibilmente leggera che offre moltissimi mixin utili come quello per aggiungere i puntini di sospensione nei nostri testi oppure quello che ci permette di modificare facilmente i nostri pulsanti.

Oltre a questo un’apprezzata caratteristica di questa libreria è che risulta essere facilmente estendibile.

Infatti il focus principale di Bourbon è quello di presentare mixin e funzioni di comune utilità ma non si spinge alla creazione di griglie o di elementi complessi.

Per queste necessità il team di Bourbon ha creato le seguenti librerie specifiche:

• Neat – semplice gestione delle griglie (usa ancora i float)
• Bitter – una soluzione molto simile al Normalize.css

Insomma se non hai tempo da perdere e vuoi una libreria all-in-one che ti può aiutare nel tuo lavoro hai trovato quello che ti serve 😃

Conclusioni

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 che non abbiamo visto tutto!

Ci sono altre librerie che non ho messo in evidenza in questo articolo ma che puoi trovare in questo repository costantemente aggiornato.

Quello che ho voluto fare con la stesura di questo articolo è aiutarti a capire che conoscere Sass è veramente importante per il tuo lavoro , in fin dei conti ormai è uno standard e anche se i CSS stanno aggiungendo nuove soluzioni interessanti (come per esempio le Custom Properties) difficilmente raggiungerà lo stesso livello di Sass.

Se senti la necessità di 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.

Se poi 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 te ne saremo infinitamente grati!

L'articolo 10 librerie Sass che ti aiutano nello sviluppo CSS proviene da SkillsAndMore.