Vantaggi dell'utilizzo di un preprocessore (Sass) nello sviluppo CSS

“Program script digital wallpaper” di Maik Jonietz su Unsplash

Esistono molti argomenti sul Web se l'utilizzo di un preprocessore CSS è utile nello sviluppo o meno. La mia opinione personale è che potrebbe non essere necessario un preprocessore per piccoli progetti o applicazioni Web.

Tuttavia, la manutenzione e la leggibilità del codice CSS diventano più difficili man mano che il progetto diventa più grande. Gestire migliaia di righe di regole CSS, fa perdere tempo agli sviluppatori e aumenta i costi del progetto. Man mano che il progetto si ingrandisce, i CSS causano alcuni problemi come:

  • Grande sforzo per piccoli cambiamenti
  • Difficoltà nella strutturazione del codice
  • Ridondanza del codice
  • Linee infinite di classi e regole CSS

Un preprocessore ci aiuta a gestire questi problemi. Ha alcuni vantaggi rispetto ai normali CSS. Prima di approfondire, spiega innanzitutto cos'è un preprocessore CSS ...

Che cos'è un preprocessore CSS?

Un programma / strumento che ha una propria sintassi che viene compilato successivamente nel codice CSS standard.

Un preprocessore ha una propria sintassi per consentire agli sviluppatori di scrivere codice CSS più semplice e pulito. Successivamente, viene tradotto in un file separato in CSS standard, poiché i browser non comprendono la sintassi.

Esistono diversi preprocessori come Sass, Less e Stylus. In questo articolo, spiegherò alcuni vantaggi di Sass.

Che cos'è Sass?

Riferimento: sito ufficiale di Sass

Sass è uno dei preprocessori CSS più utilizzati. Ha varie funzionalità per aiutare gli sviluppatori a scrivere codice CSS migliore e più pulito. Puoi controllare per maggiori dettagli dal sito ufficiale di Sass e dal repository Github.

FAQ: Sass vs SCSS

Questa è una domanda frequente. In realtà sono entrambi Sass con una sintassi diversa. SCSS è fondamentalmente una versione più recente, Sass Versione 3.

Esempio di sintassi Sass:

$ colore: grigio
= My-carattere ($ colore)
  famiglia di caratteri: Arial, Helvetica, sans-serif
  dimensione carattere: 16px
  colore: $ colore
corpo
  sfondo: $ color
  margine: 0
  + Mia-font (bianco)

Esempio di sintassi SCSS:

$ color: grigio;
@mixin my-font ($ color) {
  famiglia di caratteri: Arial, Helvetica, sans-serif;
  dimensione carattere: 16px;
  colore: $ colore;
}
body {
  sfondo: $ color;
  margine: 0;
  @include my-font (bianco);
}

Come possiamo vedere, SCSS (Sassy CSS) ha una sintassi simile a CSS, che è molto più facile da leggere. È un'estensione del CSS, mentre Sass ha una sintassi più diversa. Anche la loro estensione è diversa: .sass & .scss.

Puoi leggere di più qui. Andiamo avanti con le funzionalità di Sass.

Caratteristica n. 1: variabili

Varie classi CSS possono contenere la stessa regola o le stesse regole in un progetto. Ad esempio, abbiamo 20 caselle sulla nostra pagina Web con diversi colori di sfondo:

.box-1 {
   larghezza: 100px;
   altezza: 100 px;
   sfondo: rosso;
}
.box-2 {
   larghezza: 100px;
   altezza: 100 px;
   sfondo: giallo;
}
...
.box-20 {
   larghezza: 100px;
   altezza: 100 px;
   sfondo: blu;
}

Più tardi, il nostro cliente cambia idea e vuole scatole più grandi. Quindi devo aumentare le proprietà di larghezza e altezza di ogni classe una per una. Questo potrebbe anche essere di 50 classi. Nella programmazione della vita reale, questo può essere frustrante. Come ho accennato in precedenza, questo è un esempio di grande sforzo per piccoli cambiamenti.

Come possiamo farlo in modo più efficiente?

Sass offre una soluzione: variabili. Come in altri linguaggi di programmazione, possiamo usare le variabili per memorizzare valori e riutilizzarli in seguito.

Definizione di una variabile:

$ nome-variabile: valore;

Tornando all'esempio precedente, se definiamo variabili per larghezza e altezza:

$ box-width: 100px;
$ box-height: 100px;

più tardi, quando è necessario un cambiamento, non ci resta che cambiare i loro valori una volta:

$ box-larghezza: 200px; // modificato da 100px a 200px
$ box-height: 200px; // È tutto!
.box-1 {
   larghezza: $ box-larghezza; // utilizza le variabili ora anziché i pixel
   altezza: $ box-height;
   sfondo: rosso;
}
.box-2 {
   larghezza: $ box-larghezza;
   altezza: $ box-height;
   sfondo: giallo;
}
...
.box-20 {
   larghezza: $ box-larghezza;
   altezza: $ box-height;
   sfondo: blu;
}

Lo stesso CSS ora supporta anche le variabili, ma non funziona in IE e nelle versioni precedenti di altri browser:

https://caniuse.com/

Caratteristica # 2: Nesting

Il CSS standard non supporta l'annidamento. Non possiamo scrivere una lezione all'interno di un'altra classe. Man mano che il progetto diventa più grande, ciò comporta un problema di leggibilità e la struttura non è bella.

Ad esempio, definiamo un menu di navigazione con collegamenti cliccabili in HTML di seguito:

HTML supporta codice nidificato. Tuttavia, senza annidamento, sembrano così nei CSS:

Classi CSS per il menu di navigazione

Abbiamo dovuto scrivere nav per ogni tag, anche per la pseudo-classe dell'ancora (hover) perché nav è il tag genitore di tutti. Sass, tuttavia, supporta l'annidamento:

Stesse lezioni con il Sass

Qui possiamo scrivere codice meglio strutturato come in HTML. Non è necessario scrivere classe di classe dopo classe, il che impedisce anche la ridondanza

Importante: non è consigliabile nidificare classi più profonde di 3 livelli.

Caratteristica # 3: Mixins

Abbiamo imparato sopra come utilizzare le variabili per le regole CSS. E se avessimo bisogno di usare un gruppo di regole insieme? Sass ha una funzione chiamata mixins, che ci consente di farlo.

Che cos'è un mixin?

I mixin sono funzioni di Sass che raggruppano insieme le dichiarazioni CSS. Possiamo riutilizzarli in seguito come variabili.

Possiamo creare un mixin con il comando @ mixin, seguito da un nome:

@mixin my-font {
  famiglia di caratteri: Arial, Helvetica, sans-serif;
  dimensione carattere: 16px;
  stile carattere: corsivo;
}

oppure possiamo creare un mixin come funzione e aggiungere anche parametri:

$ font-color: rosso;
@mixin my-font ($ font-color) {
  famiglia di caratteri: Arial, Helvetica, sans-serif;
  dimensione carattere: 16px;
  stile carattere: corsivo;
  colore: $ font-color;
}

Dopo aver creato il mixin, possiamo usarlo in qualsiasi classe con il comando @ include. Quindi possiamo usare ogni volta il mixin my-font invece di 4 righe di regole. Questo approccio semplifica il codice.

p {
  @include my-font;
}
L'uso dei mixin è un buon modo per prevenire la ridondanza del codice.

Caratteristica n. 4: importazioni

Finalmente, possiamo tagliare i nostri enormi file CSS in pezzi più piccoli con la funzione di importazione Sass. È molto più semplice leggere e gestire file più piccoli anziché un file grande con linee infinite.

In realtà, CSS ora ha anche una funzione di importazione. Ma funziona diversamente. Il CSS invia una richiesta HTTP al server ogni volta per importare un file. Sass lo fa senza una richiesta HTTP, che è un approccio più veloce.

Tutto quello che devi fare è importare il tuo file Sass con il comando @ import in un altro file Sass:

// Il tuo file Sass principale
@importare file';
@import 'anotherFile';
.classe {
  // Il tuo codice
}
Non è necessario utilizzare le estensioni .scss nel percorso del file, Sass lo capirà.

Quindi queste sono alcune caratteristiche importanti di Sass, che ci aiutano a scrivere codice CSS più efficiente. Ci sono anche altre belle funzionalità, forse posso coprirle in un altro articolo. Per una migliore comprensione, è possibile installare Sass sul proprio sistema. Oppure puoi avviare direttamente la codifica su codepen.io.

Spero che questo articolo ti sia stato utile. Se c'è qualcosa che non capisci, commenta le tue domande qui sotto.

Controlla il mio profilo per altri articoli:

Grazie mille e alla prossima!

Questa storia è pubblicata in The Startup, la più grande pubblicazione sull'imprenditoria di Medium seguita da +387.966 persone.

Iscriviti per ricevere le nostre storie migliori qui.