Vai al contenuto
Home » Notes » Preprocessori CSS: Cosa sono e come funzionano

Preprocessori CSS: Cosa sono e come funzionano

copertina preprocessori CSS cosa sono e come funzionano

Se stai studiando o lavorando con fogli di stile CSS, probabilmente avrai sentito parlare di preprocessori CSS. Oggi vediamo cosa sono i preprocessori CSS, come funzionano e come possono essere utili ad uno sviluppatore.

Che cos’è un preprocessore CSS?

Un preprocessore CSS è un linguaggio di estensione di CSS che consente allo sviluppatore di creare una sorta di “pseudo CSS” che sarà poi tradotto in un file CSS tradizionale.

Funzionamento di un preprocessore CSS

Il funzionamento di un preprocessore è riassunto nello schema qui sotto:

  1. lo sviluppatore scrive uno “pseudo CSS” (nello schema, ad esempio, .scss)
  2. il preprocessore lo traduce e crea uno o più file CSS standard
  3. il file CSS generato viene utilizzato dalla pagina web

Qual è il vantaggio dei preprocessori CSS?

Il vantaggio offerto dai preprocessori CSS è semplificare la vita allo sviluppatore permettendogli di creare in meno tempo fogli di stile complessi, personalizzabili e curati per pagine web.
Migliora anche la manutenibilità e l’aggiornabilità del foglio di stile, perchè i preprocessori permettono di lavorare con una sintassi più ricca, strutturata e comprensibile di quella del tradizionale CSS.

Alcuni famosi Preprocessori CSS: Sass e Less

Sass e Less sono due dei preprocessori più utilizzati al mondo.

La sintassi cambia, ma le caratteristiche di fondo sono le stesse per tutti i preprocessori:

  • annidamento
  • variabili e operatori
  • mixins
  • if else
  • cicli

Annidamento: Le regole del CSS tradizionali sono piatte. Con un preprocessore è invece possibile scrivere regole CSS in maniera gerarchica. Questo evita ripetizioni di codice e rende il foglio di stile molto più comprensibili:

regole CSS piatte

stesse regole scss con annidamento

Variabili e operatori: in CSS esisono var() e calc() che permettono di creare variabili e fare semplici calcoli direttamente nello stylesheet. Con un preprocessore l’uso delle variabili diventa ancora più facile e si estendono le funzionalità degli operatori di calcolo possibili.

In Sass le variabili iniziano con “$”, in LESS iniziano con “@”, ma le funzionalità permesse sono pressochè identiche.

Mixins: i mixins sono pezzi di regole di stile che possono essere riutilizzati e parametrizzati. L’uso classico è quello di poter propagare facilmente alcune proprietà

if else: i preprocessori permettono allo sviluppatore di utilizzare strutture logiche if-else che mancano completamente nel CSS tradizionale.

cicli: I preprocessori danno allo sviluppatore la possibilità di ripetere regole CSS in cicli for senza doverle riscrivere ogni volta.

prosegui la lettura con: storia e caratteristiche di HTML

Grazie per la lettura!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *