Che cos'è il SASS

Due parole sulle potenzialità del pre-processore CSS più utilizzato al mondo

Che cos'è il SASS

Breve introduzione al pre-processore CSS più utilizzato

Cos'è il SASS

SASS, acronimo di Syntactically Awesome Style Sheets, è un pre-processore CSS che consente di utilizzare variabili, operazioni matematiche, mixin, loop, funzioni, importazioni e altre funzionalità interessanti che rendono la scrittura di codice CSS molto più produttiva.

In un certo senso, si potrebbe pensare al SASS come ad un linguaggio che estende le caratteristiche del CSS standard introducendo i vantaggi "di base" di un linguaggio di programmazione.

Come si usa?

Il codice SASS non è interpretato dai web browser; deve essere quindi compilato per generare il corrispondente codice CSS. Nulla di così complicato. Con una semplice estensione sul vostro IDE o Text editor ed un click su una nuova icona avrete compilato tutto in un batter d'occhio.

In caso usiate Visual Studio Code, vi consiglio queste due estensioni:

Sass: fornisce auto completamento, formattazione e highlighting del codice.
Live Sass Compiler: crea un'icona da cliccare per compilare il codice SASS.

Ma se devo pure compilarlo, perché usare il SASS invece del CSS?

Perché usare SASS

Considerando che i fogli di stile stanno diventando più grandi, più complessi, più difficili da mantenere e che spesso si ricorre a framework o librerie per accelerare il lavoro, l'aiuto di un pre-processore CSS può tornare davvero comodo.

Sass ti consente di utilizzare funzionalità che non esistono nel CSS, come variabili, regole nidificate, mixin, importazioni, ereditarietà, funzioni integrate e altro. Inoltre spesso i framework permettono la loro estensione fornendo la versione SASS del codice cosicché la gente possa creare dei temi custom senza il problema di dover ripetere le modifiche ad ogni nuova versione del framework.

È importante anche considerare la semplicità con cui si può imparare a scrivere codice SASS. SASS è compatibile con la sintassi CSS quindi se conosci il CSS, il passo non è così complicato.

SASS viene fornito con due diverse sintassi: SASS (.sass) stesso, che usa una sintassi indentata, e SCSS (.scss), quello più utilizzato, utilizza la stessa sintassi CSS. Devi solo rinominare il tuo file .css in .scss et voilà, il tuo primo file SCSS è stato creato.

Ovviamente così non utilizzi nessuno dei superpoteri e delle abilità fornite da SASS. È giusto un modo per iniziare ad usarlo senza paura di dover passare ore e ore a studiare qualcosa di complesso.

A questo punto potrai estendere le tue competenze di SASS seguendo la guida sul sito ufficiale e attraverso altre risorse online.

SASS più nel dettaglio

Quali sono questi super poteri tanto decantati?

SASS variabili

Uno dei grandi vantaggi dell'utilizzo del SASS è la possibilità di utilizzare le variabili. Una variabile ti consente di memorizzare un valore o un insieme di valori e di riutilizzare la variabile nei tuoi file SASS tutte le volte che vuoi e dove vuoi. Se vorrai cambiare il valore, invece di modificare il codice cambiando il valore in ogni singolo punto in cui lo hai usato, ti basterà cambiarlo una volta; nel punto in cui assegni il valore alla variabile. Facile, potente e utile.

Immagina di avere questo codice SASS:

    
$rosso: #cb3234;

h1 {
  color: $rosso;
}
h2 {
  color: $rosso;
}
h3 {
  color: $rosso;
}

Dovendo sostituire il colore #cb3234 con un altro colore #ff0000, ti basterà farlo dove inizializzi la variabile $rosso.

Compilando questo codice SASS si occuperà della variabile $rosso sostituendo il nome della variabile con il suo valore memorizzato.

SASS sintassi nidificata

SASS consente di utilizzare una sintassi nidificata, cioè codice contenuto all'interno di altro codice che fornisce un dettaglio più generale. Questo sistema è un modo più pulito di indirizzare gli elementi. In altre parole puoi nidificare i tuoi elementi HTML utilizzando i selettori CSS.

Alcuni vantaggi dell'annidamento sono:

Sintassi più naturale e facile da leggere nella maggior parte dei casi.
Evita la necessità di riscrivere i selettori più volte.
Migliore organizzazione e struttura del codice grazie alla sua gerarchia visiva.
Codice più gestibile.

Esempio di codice SASS nidificato (sintassi SCSS):

    
.div {
  font: $ubuntu-font;
  color: $rosso;
  p {
    margin-left: 1rem;
    a {
      padding: 5px;
      font-size: 1.5rem;
      span {
        font-weight: 600;
      }
    }
  }
}

Ovviamente nidificare troppo in profondità non è una buona pratica; più profondo è l'annidamento, più dettagliato diventa il file SASS e più grande sarà potenzialmente il CSS compilato, poiché l'annidamento viene tramutato in CSS durante la compilazione.

L'uso eccessivo dell'annidamento può creare:

Regole CSS eccessivamente specifiche difficili da mantenere.
Selettori non riutilizzabili.
Problemi di prestazione. Il CSS generato presenterà lunghe stringhe di selettori e quindi il file sarà di dimensioni più grandi.

SASS mixin

I mixin sono "come" delle funzioni in altri linguaggi di programmazione ("come" perché ci assomigliano; le funzioni SASS sono un altro costrutto che puoi approfondire nella guida ufficiale) che hanno lo scopo di risolvere il problema della ripetizione del codice. Restituiscono un valore o un insieme di valori e possono accettare parametri inclusi valori predefiniti.

Esempio di mixin SASS (sintassi SCSS):

    
@mixin testo-importante {
  color: red;
  font-size: 25px;
}

Applicazione del mixin a due elementi:

    
h1 {
  @include testo-importante;
  color: blue;
}

h2 {
  @include testo-importante;
}

Codice CSS sopo la compilazione:

    
h1 {
  color: blue;
  font-size: 25px;
}

h2 {
  color: red;
  font-size: 25px;
}

I mixin accettano anche parametri, è quindi possibile passare tali parametri in input per sovrascrivere i parametri di default.

Utilizzando i parametri, il codice dell'esempio precedente può essere sostituito con questo:

    
@mixin testo-importante($color: red, $font_size: 25px) {
  color: $color;
  font-size: $font_size;
}

h1 {
  @include testo-importante($color: blue);
}

h2 {
  @include testo-importante();
}

SASS import

Per gestire la modularità del progetto, SASS permette di dividere il codice in file multipli secondo le necessità del progetto e di poterli richiamare all'occorrenza con la keyword @import.

Se nel caso di lunghi file CSS è possibile dividere il codice su più file richiamandoli poi nell'ordine corretto all'interno del file HTML, con il SASS la divisione rimane solo in ambito di sviluppo. Questa differenza fornisce allo sviluppatore la comodità di lavorare su file divisi senza però influire sul numero di richieste HTTP che il client dovrà fare al server per ottenere tutti i file CSS dato che, in fase di compilazione, di tutti i file SASS verrà generato un unico file CSS.

Esempio di utilizzo dell'import:

    
@import "asset/bootstrap";
@import "style/my_variables";
@import "style/my_typography";
@import "style/my_components";

Si noti il fatto che all'import viene fornito un path così da poter strutturare la propria directory degli stili a piacimento.

Comunità e frameworks

La comunità creatasi attorno a SASS è notevolmente aumentata negli anni rendendolo il pre-processore CSS più utilizzato assieme a LESS, una delle altre solide alternative.

Comunità non è un concetto da sottovalutare quando si tratta della scelta di un linguaggio perché porta con se documentazione, guide, esempi, forum per richieste di aiuto e tutto ciò che può aiutare e sostenere chi si approccia al linguaggio (SASS community).

Un altro motivo che fornisce stabilità al progetto SASS è che alcuni dei migliori framework front-end come Bootstrap e Foundation vengono oramai sviluppati con SASS. Se hai familiarità con Bootstrap o Foundation, conoscere SASS ti darà la possibilità di personalizzare questi framework web semplicemente sfruttando le variabili SASS da loro dedicate ed estendendone le funzionalità con il tuo codice.

Conclusioni

I preprocessori CSS sono qui per restare. Estendono le funzionalità CSS di base fornendo una serie di potenti funzionalità per aumentare la produttività tra cui ereditarietà, funzioni, direttive di controllo ed espressioni come if(), for() e while(), tipi di dati, interpolazione, ecc...

In questo articolo ho fornito solo qualche esempio dell'utilità del SASS ma per tutto il resto è bene fare riferimento alla pagina ufficiale della documentazione SASS.

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋

Author: Fantantonio

Date: 07/02/2023

Categories: devtips

Tags: sass scss css stylesheet web design bootstrap foundation