Preprocessori css

Cosa sono i preprocessori css

Nel corso degli anni lo sviluppo frontend si è evoluto, 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. Inziò con la libreria less.js salvo poi passare a sass.js con l’uscita della versione 4.

Cosa è 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 autoimportandoli automaticamente nel progetto.

Per scoprire di più su less.js ti consiglio di informarti sul sito web ufficiale

Se non sai cosa è un task runner ti invito a visitare questo link

Cosa è Sass?

Sass è un preprocessore css. 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 ti va puoi approfondire la libreria Sass ti consiglio di informarti sul sito web ufficiale

Cosa sceglierai?

Io cosi come Bootstrap ho iniziato con less.js, per poi passare a sass.js, per motivi lavorativi e devo dire che mi sto trovando molto bene.

Qualsiasi libreria deciderai di usare ti sarà molto utile, e anche se all’inizio ti sembrerà di perdere più tempo del previsto, una volta conosciuta bene ed implementato le funzioni a dovere ti renderai conto di quanto invece sia rapida e abbia migliorato non solo la leggibilità del codice ma soprattutto la tua produttività.

E tu cosa sceglierai per il tuo progetto frontend? Fammelo sapere nei commenti!

No Comments

Leave a Comment: