Che cosa sono
In questo articolo ho provveduto a spiegare il funzionamento base dei CSS ma non finisce qui. Nel corso degli anni lo sviluppo frontend non fa altro che cambiare e migliorare, infatti il css adesso consente di implementare funzionalità che prima erano possibili solo con l’utilizzo di javascript. Ciononostante, il css possiede ancora delle limitazioni che però vengono abbattute dalle librerie javascript denominate preprocessori css.
I preprocessori css creano dei propri fogli di stile che consentono la condivisione di variabili e lo sviluppo di funzioni, di regole annidate ed operazioni che in css non sarebbero possibili. Tutte queste funzionalità velocizzano ciò che in altro modo sarebbe lungo e ripetitivo; grazie alla reinterpretazione del codice il tutto viene in seguito codificato in css. Oggi se utilizzate un framework css conoscere i preprocessori vi agevolerà nella personalizzazione del progetto al quale state lavorando, visto che ormai qualsiasi framework css ne fa uso. Bootstrap ad esempio, uno dei framework css più conosciuti e forse utilizzati, ne fa uso. Iniziò con la libreria less.js salvo poi passare a sass.js con l’uscita della versione 4.
Ma adesso andiamo nel dettaglio con LESS.
Come già anticipato less.js è una libreria javascript che estende il linguaggio css. Per utilizzare questa libreria ed utilizzarne tutte le funzionalità in qualsiasi progetto basta importare il file less.js. Tutti i file .less devono essere compilati, di solito per farlo viene utilizzato un task runner come gulp.js, grunt.js, webpack ecc.. , che prende questi files e li trasforma in css importandoli automaticamente nel progetto.
Per scoprire di più su less.js ti consiglio di informarti sul sito web ufficiale.
Per quanto riguarda Sass le funzionalità sono molto simili. Il linguaggio usato con Sass a differenza di less.js ha due tipi di estensione: i files .scss, e i files .sass. Entrambi hanno una sintassi completamente compatibile con quella del css, ma gli ultimi si differenziano per l’assenza dei punti e virgola a fine istruzione e delle parentesi che vengono riconosciute grazie alla tabulazione delle istruzioni. Anche le regole annidate fanno uso di questa tabulazione, quindi se non si sta attenti è molto facile sbagliare a causa di uno spazio mancante o di troppo che potrebbe annidare un selettore invece di un altro
Se vuoi approfondire la libreria Sass ti consiglio di informarti sul sito web ufficiale.
Infine tra i più noti abbiamo Stylus, un linguaggio di fogli di stile con una propria sintassi che viene poi compilato in CSS. Stylus è stato sviluppato in Node.js e JADE da un ex programmatore di Node.js, TJ Holowaychuk, e usa l'estensione di file .styl.
La sintassi di Stylus è potente e flessibile: è possibile infatti scrivere codice sia usando la sintassi CSS standard sia omettendo completamente la punteggiatura ormai nota a tutti.
Se vuoi approfondire la libreria Sass ti consiglio di informarti sul sito web ufficiale.
