La guida completa su come usare SASS: cosa c’è da sapere

Se avete già creato siti web, probabilmente conoscete bene il CSS. Forse lavorando con il linguaggio dei fogli di stile vi siete persi alcune funzioni. Progettare siti web con il CSS può essere molto noioso e per questo motivo molti sviluppatori ora si affidano a SASS. Dietro l'acronimo si nasconde una promessa: Syntactically Awesome Style Sheets, in italiano letteralmente “fogli di stile sintatticamente fantastici”. SASS è un preprocessore e un linguaggio di fogli di stile allo stesso tempo.

Il fatto che si tratti di un preprocessore è dovuto alla necessità di conversione. Prima che SASS possa essere riprodotto, il codice sorgente deve essere compilato in un ordinario CSS. In questa dettagliata guida di SASS vi spieghiamo anche come funziona questo passaggio. Affinché possiate imparare con facilità a usare questo linguaggio, procederemo passo dopo passo spiegando tutto con esempi.

In linea di principio SASS è indipendente dalla piattaforma, il che permette di lavorare sia su PC sia su Mac o Linux. SASS si basa – almeno nella versione originale – sul linguaggio di programmazione Ruby, pertanto è necessario averlo integrato nel sistema. Su macOS Ruby dovrebbe essere già preinstallato, mentre per i PC Windows è possibile utilizzare RubyInstaller. Il pacchetto di installazione contiene il linguaggio, un ambiente di sviluppo (che tuttavia non è indispensabile per SASS) e la documentazione. Anche per le distribuzioni Linux l'installazione non è difficile.

Ci sono diversi modi per installare SASS sul vostro sistema. Ultimamente si sono affermate diverse applicazioni che facilitano il lavoro con il linguaggio dei fogli di stile. Alcune di queste sono a pagamento, mentre altre come Koala o Scout-App sono gratuite e open source. In linea di principio, tuttavia, non è necessario un programma aggiuntivo per poter utilizzare SASS sul sistema. Ruby include il gestore di pacchetti gem, che rende facile implementare il linguaggio dei fogli di stile tramite riga di comando. Aprite quindi il terminale o il prompt dei comandi e immettete il seguente comando:

Questo messaggio dovrebbe bastare. Se dovesse però apparire un messaggio di errore, è possibile che non si abbiano i diritti necessari per installare il software. È possibile risolvere il problema lavorando con il comando sudo (macOS, Linux) o facendo clic con il tasto destro del mouse sul prompt dei comandi come amministratore (Windows). Per verificare che l'installazione sia stata eseguita con successo e sia aggiornata, chiedete a SASS la versione installata:

Oltre all'installazione, è necessario impostare anche la compilazione. Affinché il codice SASS possa funzionare su un sito web, deve prima essere convertito in CSS. Anche in questo caso ci sono diversi modi per farlo: se avete scelto uno dei programmi per installare SASS, potete servirvene per compilare. Se lavorate con i task runner Grunt o Gulp, saranno loro a sbrigare il lavoro per voi una volta impostati. Anche per alcuni editor di testo ci sono plug-in che si occupano della compilazione. Ma anche la fase di conversione si può eseguire comodamente tramite riga di comando.

SASS offre agli utenti le opzioni per ricompilare dopo ogni modifica del codice sorgente o per attivare una modalità di monitoraggio. In quest'ultimo caso il compilatore controlla un file o un'intera cartella ed esegue automaticamente la conversione. Per il monitoraggio utilizzate la riga di comando per navigare fino alla cartella del progetto del sito web e avviare uno dei due comandi:

In questo modo monitorate il file esempio.sass e compilate il codice sorgente del file esempio.css. Se aggiungete altre due sottocartelle alla vostra cartella di progetto, una per i file SASS e un'altra per i file CSS, e le nominate rispettivamente sass e css, potete monitorare l'intera cartella:

Non appena vengono apportate e salvate modifiche ai file SASS, il compilatore sovrascrive automaticamente i file CSS esistenti con le versioni più recenti.

Se desiderate convertire in SASS un vostro progetto di sito web esistente scritto in CSS dovete convertire anche il vostro vecchio codice CSS. A tal fine dovete prima di tutto considerare se intendete lavorare con la sintassi originale SASS o con la nuova variante SCSS. Nella Digital Guide di IONOS potete approfondire le differenze che intercorrono tra SASS e SCSS; nel presente tutorial SASS li illustreremo sempre entrambi. Anche per le conversioni esistono rispettivi comandi:

Il convertitore legge i rispettivi formati a partire dalle estensioni dei file. In alternativa è possibile utilizzare un sito web utile e semplice da usare, CSS 2 SASS/SCSS: basta inserire il codice CSS sul lato sinistro della finestra e sul lato destro visualizzerete il codice sorgente convertito nel formato desiderato. A quel punto potete copiare il codice in un file. Se decidete di usare SCSS, la conversione è opzionale: rinominate i vostri file .scss invece di .css. Qualsiasi codice scritto con le regole CSS funziona anche con SCSS.

Come accennato sopra, in SASS non esiste una sola sintassi bensì si sono affermati due formati concorrenti. Originariamente SASS si basava sulla sintassi oggi conosciuta come indented syntax ("sintassi indentata"), in cui le rientranze innescano il nesting e l’interruzione di riga chiude efficacemente una linea di codice. SCSS, invece, è più orientato al formato conosciuto dai CSS e quindi richiede delle parentesi graffe e dei punti e virgola. Affinché possiate mettere in pratica questo tutorial SASS, indipendentemente dalla sintassi scelta, vi presentiamo la procedura in entrambi i formati. Passo dopo passo, vediamo ora le peculiarità di SASS.

La maggior parte degli sviluppatori web apprezzano l'uso di variabili in SASS. Con questa utile funzione è possibile salvare le informazioni sotto forma di alias e riutilizzarle nei punti desiderati. Le variabili sono molto popolari, ad esempio, nel contesto delle specifiche di colori e dimensioni. Sotto una variabile è possibile salvare il valore esadecimale di un colore o regolare una dimensione fissa utilizzando funzioni matematiche. In SASS Le variabili sono introdotte dal segno del dollaro ($):

SASS

SCSS

Infine basta inserire le variabili solamente nei rispettivi punti del codice:

SASS

SCSS

Infine durante la compilazione il compiler adatta la sintassi al CSS e risolve le variabili:

CSS

Può essere utile usare un valore predefinito per alcune variabili. Se non diversamente definito, SASS accede a queste informazioni. Al contrario, se la variabile è definita diversamente, le informazioni predefinite vengono ignorate. Ciò può tornare utile, ad esempio, se uno sviluppatore trasmette un prodotto non completamente finito a un cliente che vuole apportare modifiche, o se un web designer usa il proprio template. Tale valore predefinito può essere ottenuto impostando un flag predefinito (!default). È possibile inserire sia i valori normali che le variabili già definite:

SASS

SCSS

SASS ha una pratica direttiva che permette di includere altri file nel foglio di stile. Ad esempio, si crea un file in cui si definiscono tutte le variabili (qui è possibile specificare e dare un nome a tutti i valori di colore richiesti) e si importa il file. Quindi si utilizzano le informazioni dal file importato come se si trovassero nel codice sorgente corrente. In questo modo i fogli di stile saranno più chiari. È possibile importare qualsiasi numero di file utilizzando @import, anche da sottodirectory. Si può anche gestire l'importazione di più file in un unico passaggio:

SASS

SCSS

Se si desidera includere file .sass o .scss, non è necessario specificare l'estensione del file; il sistema assume automaticamente che si intendano tali tipi di file. Tuttavia, avete anche la libertà di integrare i file CSS. È inoltre necessario specificare il finale in modo che il computer sappia esattamente cosa si intende. Durante la compilazione anche questa semplificazione è risolta: il codice CSS finale non contiene più la direttiva, ma solo le informazioni dei file corrispondenti.

Ciò che si importa più spesso quando si lavora con SASS sono i cosiddetti parziali, ovvero frammenti di codice con cui è possibile creare moduli che si possono facilmente installare più volte. Quando si dà un nome al file, è importante precedere il nome effettivo con un trattino basso. In questo modo si informa il compilatore che il file corrispondente non ha bisogno di una controparte CSS. In caso contrario il sistema converte tutti i file SASS in CSS con un monitoraggio adeguato.

Nell’importare i parziali omettete il trattino basso. SASS capisce comunque a quale file vi riferite. Pertanto, tuttavia, è necessario evitare di creare file con lo stesso nome, anche se una volta con e una volta senza trattino. Se avete sia esempio.sass sia _esempio.sass, si verificherà un errore. Ciò vale anche per le estensioni dei file: example.sass e example.scss non dovrebbero quindi trovarsi nella stessa directory.

Un'altra direttiva importante sono i mixin. Si tratta di regole fisse che possono essere richiamate ripetutamente nel foglio di stile senza dover inserire nuovamente il codice completo. Ciò vi aiuta a lavorare più velocemente e a mantenere il codice più leggero. Tutto ciò che è consentito in SASS può essere contenuto in un mixin, cioè regole, parametri e funzioni. Anche se lo spazio nel mixin non è limitato, non dovreste inserirvi più di venti righe. Dopotutto l'obiettivo di questa direttiva è quello di aumentare la semplicità invece di rendere tutto più complicato.

Per gestire con successo i mixin sono sufficienti due sole direttive: @mixin e @include. Con la prima si crea il template, con la seconda si include il blocco di codice:

SASS

SCSS

Nel creare il mixin date al template un nome (es. hidden). In questo modo è possibile reintegrare il blocco di codice nelle posizioni desiderate.

SASS

SCSS

La regola “extend” consente di risparmiare molto lavoro. La direttiva garantisce che tutte le proprietà di una classe siano trasferite a quelle di un'altra classe. Servitevi di @extend per evitare di ridefinire tutto da capo. La direttiva funziona anche come una catena. Una classe definita da @extend può far parte di una terza classe:

SASS

SCSS

Il compilatore risolve il codice in maniera seguente:

CSS

In alcune situazioni può capitare di voler specificare l'aspetto di una classe che non si vuole usare sul sito web vero e proprio, ma solo sotto forma di @extend. Questo è il caso in particolare se si sta costruendo la propria libreria. A tal fine SASS offre dei selettori segnaposto (“placeholder”). Si usa un segno percentuale (%) per identificare una classe che si crea solo allo scopo di usarla in altre classi. Se non importate un tale selettore esistente durante la progettazione del sito web, SASS non lo compilerà nemmeno in CSS:

SASS

SCSS

Nel codice CSS finale la classe module non appare più. Le sue proprietà sono passate direttamente alla classe post.

CSS

Anche il flag !optional può essere molto utile per l’estensione: se scrivete un’estensione da una classe che non esiste, SASS genererà un errore durante la compilazione. Con !optional lo evitate. SASS ignorerà semplicemente il comando se non trova una classe adatta.

Nell’HTML il codice è suddiviso in una struttura gerarchica ad albero. Il CSS ignora questa funzione e costringe l'utente a dichiarare le proprietà più e più volte. SASS riprende il principio del linguaggio di markup offrendo la possibilità di annidare nei fogli di stile, facendo in modo che il linguaggio consenta alle sottocategorie di ereditare le proprietà della categoria genitore. Anche in questo modo si garantisce che il codice rimanga complessivamente più snello e che il carico di lavoro per la scrittura e l'attesa sia ridotto. Ad esempio è possibile definire l'aspetto dei link e, all'interno del nesting, come appaiono questi link con l’hovering o se sono già stati visitati.

Se si usa il nesting nel codice, si usa il simbolo della e commerciale (&) per sostituire parte del selettore con il principale.

SASS

SCSS

Durante la compilazione il nesting deve essere sciolto di nuovo. In CSS ogni stato appare nuovamente definito separatamente.

CSS

Oltre alla risoluzione del nesting, la compilazione naturalmente assicura anche che le variabili (di cui abbiamo omesso la definizione nell'esempio) diventino nuovamente valori esadecimali.

Il nesting permette anche di trasmettere le cosiddette proprietà. Il CSS conosce alcune proprietà che appartengono alla stessa famiglia. Per esempio tutte le informazioni sulla formattazione dei caratteri appartengono alla stessa famiglia (font), ma devono essere definite come singoli punti nei CSS, con i loro nomi di proprietà completi. SASS dà la possibilità di raggruppare le singole proprietà sotto i cognomi.

SASS

SCSS

SASS conosce numerose funzioni che facilitano il vostro lavoro sul foglio di stile. Si tratta di flussi di lavoro predefiniti che altrimenti si dovrebbero eseguire manualmente. Le funzioni possono essere assegnate a diverse categorie:

• colori: con queste funzioni è possibile regolare i valori di colore, saturazione, trasparenza e molte altre proprietà. Per esempio, si può usare mix() per mescolare due colori in uno nuovo.
• liste: nelle liste (serie di valori delle proprietà CSS) è possibile utilizzare le funzioni per leggere il numero di voci, ad esempio, o unire più liste in una sola.
• stringhe: le stringhe sono sequenze fisse di caratteri come le si utilizza nei testi. Le funzioni di questo campo inseriscono automaticamente una sequenza di caratteri tra virgolette o un testo completo in lettere maiuscole.
• selettori: con le funzioni di questa direttiva manipolate interi selettori. Per esempio con selector-unify() avete la possibilità di unire due selettori per crearne uno. In determinate circostanze può tornare molto utile perché fa risparmiare molto lavoro.
• numeri: per quanto riguarda numeri, valori e unità troverete funzioni in grado di arrotondare per difetto o per eccesso, individuare il numero più alto in un insieme o generare un numero casuale.
• mappe: in SASS le mappe sono strutture di dati costituite da chiavi e proprietà. Le funzioni corrispondenti manipolano le raccolte. Ad esempio è possibile unire due mappe o eliminare una determinata chiave da una mappa.
• introspezione: le funzioni di questa sezione offrono una panoramica del contenuto dell’intero foglio di stile. Servono a verificare se una determinata caratteristica, un mixin o una specifica funzione esiste nel vostro codice.
• altro: nella voce “miscellaneous” SASS include anche l’utile funzione if(), che non va confusa con l’omonima direttiva. Più avanti spiegheremo la differenza al punto “diramazione”.

Inserite le funzioni nel vostro codice sempre secondo lo stesso schema: ciascuna funzione ha un nome individuale e contiene alcuni parametri tra parentesi, separati da virgole. Alla fine la funzione emette un singolo valore. Usando l'esempio della semplice ma molto utile funzione mix() spieghiamo la sintassi SASS:

SASS

SCSS

In questa funzione si mescolano i due valori di colore precedentemente definiti nelle variabili (non è necessario salvare necessariamente i valori di colore nelle variabili; si è liberi di inserire i valori esadecimali direttamente nella funzione). Come terzo parametro, specificate il rapporto di miscelazione. Nel nostro esempio il 30% di $color-1 è incluso nel risultato finale. Se si lascia vuoto l'ultimo parametro, SASS assume un mix 50/50. Nel CSS stesso appare solo un singolo valore, cioè il valore esadecimale del colore risultante:

CSS

Le funzioni finora menzionate sono già tutte nello stato in cui vengono emesse da SASS. Il linguaggio dei fogli di stile permette però anche di definire le proprie funzioni per un progetto. In questo modo è più facile e veloce completare le fasi di lavoro più frequenti. Sotto questo punto di vista le funzioni assomigliano ai mixin, tuttavia, mentre questi ultimi hanno linee di codice in uscita, le funzioni forniscono un solo valore. Grazie alla direttiva @function siete in grado di creare funzioni. Di fatto, però, potete creare una funzione solamente con una coppia di direttive. Oltre alla funzione @function iniziale, è necessario un @return incorporato per definire il valore di output:

SASS

SCSS

Con questa funzione di esempio eseguiamo un semplice calcolo della larghezza della colonna per una griglia di layout. Per prima cosa prendiamo in considerazione 12 colonne. Nel passo successivo si dà un nome alla funzione e si definisce quanti parametri contiene: nel nostro esempio un numero. Successivamente determiniamo cosa dovrebbe fare la funzione e quindi anche quale valore deve produrre. In questo caso column-width moltiplica il numero inserito come parametro del 100% e divide il risultato per il numero di colonne. Una volta che la funzione è stata definita, può essere utilizzata più volte con la modifica dei parametri. Nel CSS finale si adatta solo il valore risultante:

CSS

I cicli conferiscono al linguaggio dei fogli di stile il fascino di un vero e proprio linguaggio di programmazione. In SASS i loop si usano per creare blocchi di istruzioni che vengono ripetuti fino a quando non si verifica una condizione specificata. Sono disponibili tre diverse direttive per la creazione di loop:

• @for
• @while
• @each

Il loop @for è il caso predefinito di un ciclo nel contesto della programmazione. Il loop inizia al principio e ripete l'ordine fino a quando non si raggiunge uno stato di uscita e quindi la fine. In SASS questa direttiva si presenta in due diverse varianti: l'ultimo loop viene eseguito di nuovo quando si raggiunge la destinazione o si esce da quello precedente.

SASS

SCSS

Secondo la direttiva si specifica prima una variabile a piacimento ($i) e poi si definiscono il punto di partenza (1) e il punto di destinazione (4). Con through si specifica che deve essere eseguita anche la quarta ripetizione, mentre il loop si ferma a to dopo il terzo passaggio. Se si specifica un valore iniziale superiore al valore finale, SASS conta all'indietro. Avete due elementi integrati nel ciclo: per prima cosa viene scelto il nome nel CSS, che ottiene un numero più alto di #{$i}. La variabile (e quindi anche la designazione) viene aumentata di 1 a ogni ciclo.

In secondo luogo tra parentesi graffe o annidato si scrive ciò che dovrebbe effettivamente accadere. Nel nostro esempio una specifica di dimensione viene manipolata con un valore crescente per ogni passaggio. Nel CSS apparirà una voce separata per ogni passaggio:

CSS

La direttiva @while funziona in maniera analoga a @for. Mentre quest'ultima ha punti di inizio e fine fissi, un ciclo @while contiene una query logica: finché uno stato è vero, le istruzioni vengono ripetute. Come vedrete, possiamo ottenere esattamente lo stesso risultato con la funzione @while:

SASS

SCSS

Con questo tipo di ciclo si deve prima assegnare un valore alla variabile, poiché la direttiva stessa non richiede un valore iniziale. Nel loop si specifica lo stato fino al quale sono eseguite le ripetizioni. Nel nostro esempio il ciclo funziona finché la variabile è inferiore a 5. L'istruzione all'interno del loop è inizialmente la stessa dell’esempio @for. Anche in questo caso è possibile regolare il nome dell'elemento della variabile e aumentare la dimensione. Inoltre è necessario includere nel loop un comando che aumenta $i a ogni esecuzione, altrimenti il ciclo verrà eseguito fino all'arresto del compilatore SASS. Ma alla fine si ottiene lo stesso codice CSS del loop @for.

La direttiva @each funziona invece in modo diverso. Questo loop si basa su una lista: il ciclo passa attraverso una raccolta di dati specificati dall'utente. @each fa una propria ripetizione per ogni voce. Per esempio sarebbe possibile generare lo stesso risultato degli altri loop specificando una lista con i valori 1, 2, 3 e 4. Il vero vantaggio di questo ciclo, tuttavia, è che è possibile inserire nell'elenco anche altre informazioni oltre ai valori numerici: per esempio, è possibile utilizzare @each per aggiungere al proprio design immagini differenti. È possibile inserire i dati direttamente nella direttiva o inserire l'elenco in una variabile e poi richiamarlo.

SASS

SCSS

Anche qui è necessaria una variabile, che prende il nome di una delle voci dell'elenco ogni volta che viene eseguito il loop. Il nome è integrato nel nome del blocco di codice e nel nome del file dell'immagine. Affinché il progetto possa funzionare in un secondo momento, ovviamente è necessario che le immagini corrispondenti siano memorizzate nel percorso specificato. Il loop assicura automaticamente che la variabile rilevi la voce successiva.

CSS

Oltre ai loop, SASS mette a vostra disposizione un altro strumento altrimenti familiare dalla programmazione: la ramificazione secondo il principio "if-then-else". Con la direttiva @if si può eseguire un'istruzione solo se esiste un certo stato, altrimenti ha effetto un altro comando. Oltre alla direttiva esiste anche una funzione if(). Le due sono indipendenti l'una dall'altra, ma possono anche comparire insieme. La funzione stessa è facile da spiegare: contiene tre parametri, la condizione e due diverse uscite. La prima uscita viene emessa se il primo parametro è vero, altrimenti la funzione svolge il terzo parametro.

SASS

SCSS

Nel nostro esempio la funzione controlla se la variabile $text-color è impostata su black (nero). In questo caso (come nell'esempio) lo sfondo sarà bianco. In qualsiasi altro caso il CSS imposterà lo sfondo su nero. Come si può vedere da questo esempio, le ramificazioni non sono necessariamente adatte alla progettazione di un intero sito web. Sia la direttiva che la funzione sono utili soprattutto nei mixin o nei parziali. Questo permette al modello di reagire meglio ai valori che si verificano nel progetto finale. Al contrario, se si sa già che il colore del testo sarà nero, non è necessario scrivere una ramificazione complessa per rendere lo sfondo bianco.

Le funzioni hanno la proprietà di rappresentare un singolo valore. Per requisiti più complessi servitevi della direttiva @if, che ha il vantaggio aggiuntivo di poter distinguere più di due casi l'uno dall'altro:

SASS

SCSS

Teoricamente la sintassi della direttiva consente di creare un caso per ogni valore fornito. Assicuratevi di far seguire all'iniziale @if la direttiva @else, che potete richiamare tutte le volte che volete in combinazione con if. Solo l'ultimo @else rimane libero e serve a coprire tutti gli altri casi.

Anche in SASS è utile aggiungere commenti al codice sorgente. Da un commento significativo il documento rimane comprensibile a voi e altri anche in futuro. A maggior ragione se si impostano modelli per altri utenti, li si può aiutare con i commenti al momento della rielaborazione. Molti web designer usano i commenti anche per strutturare il codice in modo più chiaro. La maggior parte dei linguaggi di programmazione e di markup hanno la possibilità di inserire del testo nel codice che viene ignorato durante la compilazione o l'analisi. Questo testo è rilevante solo per gli esseri umani e non per i computer.

Programmatori e web designer usano i commenti anche per commentare il codice corretto: a tal fine inseriscono un blocco di codice, di cui per il momento non hanno bisogno ma che non vogliono cancellare del tutto dal codice sorgente, nei corrispondenti marcatori di commento.

Ciascun linguaggio ha un metodo specifico per commentare il testo. In SASS si fa in due modi diversi. Da un lato avete le stesse possibilità del CSS: /* */. Fate uso di questo metodo per commentare direttamente più righe. Spesso troverete commenti in CSS o SASS dove ogni riga del blocco commenti inizia con un asterisco. Tuttavia, questa è solo una convenzione e non una necessità.

Oltre al metodo conosciuto dai CSS, con // potete commentare anche singole righe in SASS:

La differenza tra i due metodi è anche che la prima variante viene copiata nei CSS compilati con le impostazioni predefinite, mentre la seconda variante va semplicemente persa. In entrambi i casi non si dovrebbe permettere che un documento CSS con commenti nel codice vada online come versione definitiva. A tal fine si utilizza invece una versione ridotta al minimo che i browser sono in grado di caricare più velocemente.