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

Se avete già creato siti web, pro­ba­bil­men­te conoscete bene il CSS. Forse lavorando con il lin­guag­gio dei fogli di stile vi siete persi alcune funzioni. Pro­get­ta­re siti web con il CSS può essere molto noioso e per questo motivo molti svi­lup­pa­to­ri ora si affidano a SASS. Dietro l'a­cro­ni­mo si nasconde una promessa: Syn­tac­ti­cal­ly Awesome Style Sheets, in italiano let­te­ral­men­te “fogli di stile sin­tat­ti­ca­men­te fan­ta­sti­ci”. SASS è un pre­pro­ces­so­re e un lin­guag­gio di fogli di stile allo stesso tempo.

Il fatto che si tratti di un pre­pro­ces­so­re è dovuto alla necessità di con­ver­sio­ne. Prima che SASS possa essere ri­pro­dot­to, il codice sorgente deve essere compilato in un ordinario CSS. In questa det­ta­glia­ta guida di SASS vi spie­ghia­mo anche come funziona questo passaggio. Affinché possiate imparare con facilità a usare questo lin­guag­gio, pro­ce­de­re­mo passo dopo passo spiegando tutto con esempi.

In linea di principio SASS è in­di­pen­den­te dalla piat­ta­for­ma, il che permette di lavorare sia su PC sia su Mac o Linux. SASS si basa – almeno nella versione originale – sul lin­guag­gio di pro­gram­ma­zio­ne Ruby, pertanto è ne­ces­sa­rio averlo integrato nel sistema. Su macOS Ruby dovrebbe essere già pre­in­stal­la­to, mentre per i PC Windows è possibile uti­liz­za­re Ru­by­In­stal­ler. Il pacchetto di in­stal­la­zio­ne contiene il lin­guag­gio, un ambiente di sviluppo (che tuttavia non è in­di­spen­sa­bi­le per SASS) e la do­cu­men­ta­zio­ne. Anche per le di­stri­bu­zio­ni Linux l'in­stal­la­zio­ne non è difficile.

Ci sono diversi modi per in­stal­la­re SASS sul vostro sistema. Ul­ti­ma­men­te si sono affermate diverse ap­pli­ca­zio­ni che fa­ci­li­ta­no il lavoro con il lin­guag­gio 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 è ne­ces­sa­rio un programma ag­giun­ti­vo per poter uti­liz­za­re SASS sul sistema. Ruby include il gestore di pacchetti gem, che rende facile im­ple­men­ta­re il lin­guag­gio 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 in­stal­la­re 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 am­mi­ni­stra­to­re (Windows). Per ve­ri­fi­ca­re che l'in­stal­la­zio­ne sia stata eseguita con successo e sia ag­gior­na­ta, chiedete a SASS la versione in­stal­la­ta:

Oltre al­l'in­stal­la­zio­ne, è ne­ces­sa­rio impostare anche la com­pi­la­zio­ne. Affinché il codice SASS possa fun­zio­na­re su un sito web, deve prima essere con­ver­ti­to in CSS. Anche in questo caso ci sono diversi modi per farlo: se avete scelto uno dei programmi per in­stal­la­re SASS, potete ser­vir­ve­ne 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 com­pi­la­zio­ne. Ma anche la fase di con­ver­sio­ne si può eseguire co­mo­da­men­te tramite riga di comando.

SASS offre agli utenti le opzioni per ri­com­pi­la­re dopo ogni modifica del codice sorgente o per attivare una modalità di mo­ni­to­rag­gio. In que­st'ul­ti­mo caso il com­pi­la­to­re controlla un file o un'intera cartella ed esegue au­to­ma­ti­ca­men­te la con­ver­sio­ne. Per il mo­ni­to­rag­gio uti­liz­za­te la riga di comando per navigare fino alla cartella del progetto del sito web e avviare uno dei due comandi:

In questo modo mo­ni­to­ra­te il file esempio.sass e compilate il codice sorgente del file esempio.css. Se ag­giun­ge­te altre due sot­to­car­tel­le alla vostra cartella di progetto, una per i file SASS e un'altra per i file CSS, e le nominate ri­spet­ti­va­men­te sass e css, potete mo­ni­to­ra­re l'intera cartella:

Non appena vengono apportate e salvate modifiche ai file SASS, il com­pi­la­to­re so­vra­scri­ve au­to­ma­ti­ca­men­te i file CSS esistenti con le versioni più recenti.

Se de­si­de­ra­te con­ver­ti­re in SASS un vostro progetto di sito web esistente scritto in CSS dovete con­ver­ti­re anche il vostro vecchio codice CSS. A tal fine dovete prima di tutto con­si­de­ra­re se intendete lavorare con la sintassi originale SASS o con la nuova variante SCSS. Nella Digital Guide di IONOS potete ap­pro­fon­di­re le dif­fe­ren­ze che in­ter­cor­ro­no tra SASS e SCSS; nel presente tutorial SASS li il­lu­stre­re­mo sempre entrambi. Anche per le con­ver­sio­ni esistono ri­spet­ti­vi comandi:

Il con­ver­ti­to­re legge i ri­spet­ti­vi formati a partire dalle esten­sio­ni dei file. In al­ter­na­ti­va è possibile uti­liz­za­re 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 vi­sua­liz­ze­re­te il codice sorgente con­ver­ti­to nel formato de­si­de­ra­to. A quel punto potete copiare il codice in un file. Se decidete di usare SCSS, la con­ver­sio­ne è opzionale: ri­no­mi­na­te 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 con­cor­ren­ti. Ori­gi­na­ria­men­te SASS si basava sulla sintassi oggi co­no­sciu­ta come indented syntax ("sintassi indentata"), in cui le rien­tran­ze innescano il nesting e l’in­ter­ru­zio­ne di riga chiude ef­fi­ca­ce­men­te una linea di codice. SCSS, invece, è più orientato al formato co­no­sciu­to dai CSS e quindi richiede delle parentesi graffe e dei punti e virgola. Affinché possiate mettere in pratica questo tutorial SASS, in­di­pen­den­te­men­te dalla sintassi scelta, vi pre­sen­tia­mo la procedura in entrambi i formati. Passo dopo passo, vediamo ora le pe­cu­lia­ri­tà di SASS.

La maggior parte degli svi­lup­pa­to­ri web ap­prez­za­no l'uso di variabili in SASS. Con questa utile funzione è possibile salvare le in­for­ma­zio­ni sotto forma di alias e riu­ti­liz­zar­le nei punti de­si­de­ra­ti. Le variabili sono molto popolari, ad esempio, nel contesto delle spe­ci­fi­che di colori e di­men­sio­ni. Sotto una variabile è possibile salvare il valore esa­de­ci­ma­le di un colore o regolare una di­men­sio­ne fissa uti­liz­zan­do funzioni ma­te­ma­ti­che. In SASS Le variabili sono in­tro­dot­te dal segno del dollaro ($):

SASS

SCSS

Infine basta inserire le variabili solamente nei ri­spet­ti­vi punti del codice:

SASS

SCSS

Infine durante la com­pi­la­zio­ne il compiler adatta la sintassi al CSS e risolve le variabili:

CSS

Può essere utile usare un valore pre­de­fi­ni­to per alcune variabili. Se non di­ver­sa­men­te definito, SASS accede a queste in­for­ma­zio­ni. Al contrario, se la variabile è definita di­ver­sa­men­te, le in­for­ma­zio­ni pre­de­fi­ni­te vengono ignorate. Ciò può tornare utile, ad esempio, se uno svi­lup­pa­to­re trasmette un prodotto non com­ple­ta­men­te finito a un cliente che vuole apportare modifiche, o se un web designer usa il proprio template. Tale valore pre­de­fi­ni­to può essere ottenuto im­po­stan­do un flag pre­de­fi­ni­to (!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 de­fi­ni­sco­no tutte le variabili (qui è possibile spe­ci­fi­ca­re e dare un nome a tutti i valori di colore richiesti) e si importa il file. Quindi si uti­liz­za­no le in­for­ma­zio­ni dal file importato come se si tro­vas­se­ro nel codice sorgente corrente. In questo modo i fogli di stile saranno più chiari. È possibile importare qualsiasi numero di file uti­liz­zan­do @import, anche da sot­to­di­rec­to­ry. Si può anche gestire l'im­por­ta­zio­ne di più file in un unico passaggio:

SASS

SCSS

Se si desidera includere file .sass o .scss, non è ne­ces­sa­rio spe­ci­fi­ca­re l'e­sten­sio­ne del file; il sistema assume au­to­ma­ti­ca­men­te che si intendano tali tipi di file. Tuttavia, avete anche la libertà di integrare i file CSS. È inoltre ne­ces­sa­rio spe­ci­fi­ca­re il finale in modo che il computer sappia esat­ta­men­te cosa si intende. Durante la com­pi­la­zio­ne anche questa sem­pli­fi­ca­zio­ne è risolta: il codice CSS finale non contiene più la direttiva, ma solo le in­for­ma­zio­ni dei file cor­ri­spon­den­ti.

Ciò che si importa più spesso quando si lavora con SASS sono i co­sid­det­ti parziali, ovvero frammenti di codice con cui è possibile creare moduli che si possono fa­cil­men­te in­stal­la­re più volte. Quando si dà un nome al file, è im­por­tan­te precedere il nome effettivo con un trattino basso. In questo modo si informa il com­pi­la­to­re che il file cor­ri­spon­den­te non ha bisogno di una con­tro­par­te CSS. In caso contrario il sistema converte tutti i file SASS in CSS con un mo­ni­to­rag­gio adeguato.

Nell’importare i parziali omettete il trattino basso. SASS capisce comunque a quale file vi riferite. Pertanto, tuttavia, è ne­ces­sa­rio 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 ve­ri­fi­che­rà un errore. Ciò vale anche per le esten­sio­ni dei file: example.sass e example.scss non do­vreb­be­ro quindi trovarsi nella stessa directory.

Un'altra direttiva im­por­tan­te sono i mixin. Si tratta di regole fisse che possono essere ri­chia­ma­te ri­pe­tu­ta­men­te nel foglio di stile senza dover inserire nuo­va­men­te il codice completo. Ciò vi aiuta a lavorare più ve­lo­ce­men­te e a mantenere il codice più leggero. Tutto ciò che è con­sen­ti­to 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'o­biet­ti­vo di questa direttiva è quello di aumentare la sem­pli­ci­tà invece di rendere tutto più com­pli­ca­to.

Per gestire con successo i mixin sono suf­fi­cien­ti 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 rein­te­gra­re il blocco di codice nelle posizioni de­si­de­ra­te.

SASS

SCSS

La regola “extend” consente di ri­spar­mia­re molto lavoro. La direttiva ga­ran­ti­sce che tutte le proprietà di una classe siano tra­sfe­ri­te a quelle di un'altra classe. Servitevi di @extend per evitare di ri­de­fi­ni­re 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 com­pi­la­to­re risolve il codice in maniera seguente:

CSS

In alcune si­tua­zio­ni può capitare di voler spe­ci­fi­ca­re 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 par­ti­co­la­re se si sta co­struen­do la propria libreria. A tal fine SASS offre dei selettori se­gna­po­sto (“pla­ce­hol­der”). Si usa un segno per­cen­tua­le (%) per iden­ti­fi­ca­re una classe che si crea solo allo scopo di usarla in altre classi. Se non importate un tale selettore esistente durante la pro­get­ta­zio­ne 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 di­ret­ta­men­te alla classe post.

CSS

Anche il flag !optional può essere molto utile per l’esten­sio­ne: se scrivete un’esten­sio­ne da una classe che non esiste, SASS genererà un errore durante la com­pi­la­zio­ne. Con !optional lo evitate. SASS ignorerà sem­pli­ce­men­te il comando se non trova una classe adatta.

Nell’HTML il codice è suddiviso in una struttura ge­rar­chi­ca ad albero. Il CSS ignora questa funzione e costringe l'utente a di­chia­ra­re le proprietà più e più volte. SASS riprende il principio del lin­guag­gio di markup offrendo la pos­si­bi­li­tà di annidare nei fogli di stile, facendo in modo che il lin­guag­gio consenta alle sot­to­ca­te­go­rie di ereditare le proprietà della categoria genitore. Anche in questo modo si ga­ran­ti­sce che il codice rimanga com­ples­si­va­men­te 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, al­l'in­ter­no 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 com­mer­cia­le (&) per so­sti­tui­re parte del selettore con il prin­ci­pa­le.

SASS

SCSS

Durante la com­pi­la­zio­ne il nesting deve essere sciolto di nuovo. In CSS ogni stato appare nuo­va­men­te definito se­pa­ra­ta­men­te.

CSS

Oltre alla ri­so­lu­zio­ne del nesting, la com­pi­la­zio­ne na­tu­ral­men­te assicura anche che le variabili (di cui abbiamo omesso la de­fi­ni­zio­ne nel­l'e­sem­pio) diventino nuo­va­men­te valori esa­de­ci­ma­li.

Il nesting permette anche di tra­smet­te­re le co­sid­det­te proprietà. Il CSS conosce alcune proprietà che ap­par­ten­go­no alla stessa famiglia. Per esempio tutte le in­for­ma­zio­ni sulla for­mat­ta­zio­ne dei caratteri ap­par­ten­go­no alla stessa famiglia (font), ma devono essere definite come singoli punti nei CSS, con i loro nomi di proprietà completi. SASS dà la pos­si­bi­li­tà di rag­grup­pa­re le singole proprietà sotto i cognomi.

SASS

SCSS

SASS conosce numerose funzioni che fa­ci­li­ta­no il vostro lavoro sul foglio di stile. Si tratta di flussi di lavoro pre­de­fi­ni­ti che al­tri­men­ti si do­vreb­be­ro eseguire ma­nual­men­te. Le funzioni possono essere assegnate a diverse categorie:

• colori: con queste funzioni è possibile regolare i valori di colore, sa­tu­ra­zio­ne, tra­spa­ren­za 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 uti­liz­za­re 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 in­se­ri­sco­no au­to­ma­ti­ca­men­te una sequenza di caratteri tra vir­go­let­te o un testo completo in lettere maiuscole.
• selettori: con le funzioni di questa direttiva ma­ni­po­la­te interi selettori. Per esempio con selector-unify() avete la pos­si­bi­li­tà di unire due selettori per crearne uno. In de­ter­mi­na­te cir­co­stan­ze può tornare molto utile perché fa ri­spar­mia­re molto lavoro.
• numeri: per quanto riguarda numeri, valori e unità troverete funzioni in grado di ar­ro­ton­da­re per difetto o per eccesso, in­di­vi­dua­re il numero più alto in un insieme o generare un numero casuale.
• mappe: in SASS le mappe sono strutture di dati co­sti­tui­te da chiavi e proprietà. Le funzioni cor­ri­spon­den­ti ma­ni­po­la­no le raccolte. Ad esempio è possibile unire due mappe o eliminare una de­ter­mi­na­ta chiave da una mappa.
• in­tro­spe­zio­ne: le funzioni di questa sezione offrono una pa­no­ra­mi­ca del contenuto dell’intero foglio di stile. Servono a ve­ri­fi­ca­re se una de­ter­mi­na­ta ca­rat­te­ri­sti­ca, un mixin o una specifica funzione esiste nel vostro codice.
• altro: nella voce “mi­scel­la­neous” SASS include anche l’utile funzione if(), che non va confusa con l’omonima direttiva. Più avanti spie­ghe­re­mo la dif­fe­ren­za al punto “di­ra­ma­zio­ne”.

Inserite le funzioni nel vostro codice sempre secondo lo stesso schema: ciascuna funzione ha un nome in­di­vi­dua­le 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() spie­ghia­mo la sintassi SASS:

SASS

SCSS

In questa funzione si mescolano i due valori di colore pre­ce­den­te­men­te definiti nelle variabili (non è ne­ces­sa­rio salvare ne­ces­sa­ria­men­te i valori di colore nelle variabili; si è liberi di inserire i valori esa­de­ci­ma­li di­ret­ta­men­te nella funzione). Come terzo parametro, spe­ci­fi­ca­te il rapporto di mi­sce­la­zio­ne. 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 esa­de­ci­ma­le del colore ri­sul­tan­te:

CSS

Le funzioni finora men­zio­na­te sono già tutte nello stato in cui vengono emesse da SASS. Il lin­guag­gio dei fogli di stile permette però anche di definire le proprie funzioni per un progetto. In questo modo è più facile e veloce com­ple­ta­re le fasi di lavoro più frequenti. Sotto questo punto di vista le funzioni as­so­mi­glia­no ai mixin, tuttavia, mentre questi ultimi hanno linee di codice in uscita, le funzioni for­ni­sco­no 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, è ne­ces­sa­rio un @return in­cor­po­ra­to 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 con­si­de­ra­zio­ne 12 colonne. Nel passo suc­ces­si­vo si dà un nome alla funzione e si definisce quanti parametri contiene: nel nostro esempio un numero. Suc­ces­si­va­men­te de­ter­mi­nia­mo cosa dovrebbe fare la funzione e quindi anche quale valore deve produrre. In questo caso column-width mol­ti­pli­ca 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 uti­liz­za­ta più volte con la modifica dei parametri. Nel CSS finale si adatta solo il valore ri­sul­tan­te:

CSS

I cicli con­fe­ri­sco­no al lin­guag­gio dei fogli di stile il fascino di un vero e proprio lin­guag­gio di pro­gram­ma­zio­ne. In SASS i loop si usano per creare blocchi di istru­zio­ni che vengono ripetuti fino a quando non si verifica una con­di­zio­ne spe­ci­fi­ca­ta. Sono di­spo­ni­bi­li tre diverse direttive per la creazione di loop:

• @for
• @while
• @each

Il loop @for è il caso pre­de­fi­ni­to di un ciclo nel contesto della pro­gram­ma­zio­ne. 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 de­sti­na­zio­ne o si esce da quello pre­ce­den­te.

SASS

SCSS

Secondo la direttiva si specifica prima una variabile a pia­ci­men­to ($i) e poi si de­fi­ni­sco­no il punto di partenza (1) e il punto di de­sti­na­zio­ne (4). Con through si specifica che deve essere eseguita anche la quarta ri­pe­ti­zio­ne, mentre il loop si ferma a to dopo il terzo passaggio. Se si specifica un valore iniziale superiore al valore finale, SASS conta al­l'in­die­tro. 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 de­si­gna­zio­ne) viene aumentata di 1 a ogni ciclo.

In secondo luogo tra parentesi graffe o annidato si scrive ciò che dovrebbe ef­fet­ti­va­men­te accadere. Nel nostro esempio una specifica di di­men­sio­ne viene ma­ni­po­la­ta 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 que­st'ul­ti­ma ha punti di inizio e fine fissi, un ciclo @while contiene una query logica: finché uno stato è vero, le istru­zio­ni vengono ripetute. Come vedrete, possiamo ottenere esat­ta­men­te 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 ri­pe­ti­zio­ni. Nel nostro esempio il ciclo funziona finché la variabile è inferiore a 5. L'i­stru­zio­ne al­l'in­ter­no del loop è ini­zial­men­te la stessa dell’esempio @for. Anche in questo caso è possibile regolare il nome del­l'e­le­men­to della variabile e aumentare la di­men­sio­ne. Inoltre è ne­ces­sa­rio includere nel loop un comando che aumenta $i a ogni ese­cu­zio­ne, al­tri­men­ti il ciclo verrà eseguito fino al­l'ar­re­sto del com­pi­la­to­re 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 at­tra­ver­so una raccolta di dati spe­ci­fi­ca­ti dal­l'u­ten­te. @each fa una propria ri­pe­ti­zio­ne per ogni voce. Per esempio sarebbe possibile generare lo stesso risultato degli altri loop spe­ci­fi­can­do una lista con i valori 1, 2, 3 e 4. Il vero vantaggio di questo ciclo, tuttavia, è che è possibile inserire nel­l'e­len­co anche altre in­for­ma­zio­ni oltre ai valori numerici: per esempio, è possibile uti­liz­za­re @each per ag­giun­ge­re al proprio design immagini dif­fe­ren­ti. È possibile inserire i dati di­ret­ta­men­te nella direttiva o inserire l'elenco in una variabile e poi ri­chia­mar­lo.

SASS

SCSS

Anche qui è ne­ces­sa­ria una variabile, che prende il nome di una delle voci del­l'e­len­co ogni volta che viene eseguito il loop. Il nome è integrato nel nome del blocco di codice e nel nome del file del­l'im­ma­gi­ne. Affinché il progetto possa fun­zio­na­re in un secondo momento, ov­via­men­te è ne­ces­sa­rio che le immagini cor­ri­spon­den­ti siano me­mo­riz­za­te nel percorso spe­ci­fi­ca­to. Il loop assicura au­to­ma­ti­ca­men­te che la variabile rilevi la voce suc­ces­si­va.

CSS

Oltre ai loop, SASS mette a vostra di­spo­si­zio­ne un altro strumento al­tri­men­ti familiare dalla pro­gram­ma­zio­ne: la ra­mi­fi­ca­zio­ne secondo il principio "if-then-else". Con la direttiva @if si può eseguire un'i­stru­zio­ne solo se esiste un certo stato, al­tri­men­ti ha effetto un altro comando. Oltre alla direttiva esiste anche una funzione if(). Le due sono in­di­pen­den­ti l'una dal­l'al­tra, ma possono anche comparire insieme. La funzione stessa è facile da spiegare: contiene tre parametri, la con­di­zio­ne e due diverse uscite. La prima uscita viene emessa se il primo parametro è vero, al­tri­men­ti 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 nel­l'e­sem­pio) lo sfondo sarà bianco. In qualsiasi altro caso il CSS imposterà lo sfondo su nero. Come si può vedere da questo esempio, le ra­mi­fi­ca­zio­ni non sono ne­ces­sa­ria­men­te adatte alla pro­get­ta­zio­ne di un intero sito web. Sia la direttiva che la funzione sono utili so­prat­tut­to nei mixin o nei parziali. Questo permette al modello di reagire meglio ai valori che si ve­ri­fi­ca­no nel progetto finale. Al contrario, se si sa già che il colore del testo sarà nero, non è ne­ces­sa­rio scrivere una ra­mi­fi­ca­zio­ne complessa per rendere lo sfondo bianco.

Le funzioni hanno la proprietà di rap­pre­sen­ta­re un singolo valore. Per requisiti più complessi servitevi della direttiva @if, che ha il vantaggio ag­giun­ti­vo di poter di­stin­gue­re più di due casi l'uno dal­l'al­tro:

SASS

SCSS

Teo­ri­ca­men­te la sintassi della direttiva consente di creare un caso per ogni valore fornito. As­si­cu­ra­te­vi di far seguire al­l'i­ni­zia­le @if la direttiva @else, che potete ri­chia­ma­re tutte le volte che volete in com­bi­na­zio­ne con if. Solo l'ultimo @else rimane libero e serve a coprire tutti gli altri casi.

Anche in SASS è utile ag­giun­ge­re commenti al codice sorgente. Da un commento si­gni­fi­ca­ti­vo il documento rimane com­pren­si­bi­le 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 rie­la­bo­ra­zio­ne. Molti web designer usano i commenti anche per strut­tu­ra­re il codice in modo più chiaro. La maggior parte dei linguaggi di pro­gram­ma­zio­ne e di markup hanno la pos­si­bi­li­tà di inserire del testo nel codice che viene ignorato durante la com­pi­la­zio­ne o l'analisi. Questo testo è rilevante solo per gli esseri umani e non per i computer.

Pro­gram­ma­to­ri e web designer usano i commenti anche per com­men­ta­re il codice corretto: a tal fine in­se­ri­sco­no un blocco di codice, di cui per il momento non hanno bisogno ma che non vogliono can­cel­la­re del tutto dal codice sorgente, nei cor­ri­spon­den­ti marcatori di commento.

Ciascun lin­guag­gio ha un metodo specifico per com­men­ta­re il testo. In SASS si fa in due modi diversi. Da un lato avete le stesse pos­si­bi­li­tà del CSS: /* */. Fate uso di questo metodo per com­men­ta­re di­ret­ta­men­te più righe. Spesso troverete commenti in CSS o SASS dove ogni riga del blocco commenti inizia con un asterisco. Tuttavia, questa è solo una con­ven­zio­ne e non una necessità.

Oltre al metodo co­no­sciu­to dai CSS, con // potete com­men­ta­re anche singole righe in SASS:

La dif­fe­ren­za tra i due metodi è anche che la prima variante viene copiata nei CSS compilati con le im­po­sta­zio­ni pre­de­fi­ni­te, mentre la seconda variante va sem­pli­ce­men­te persa. In entrambi i casi non si dovrebbe per­met­te­re che un documento CSS con commenti nel codice vada online come versione de­fi­ni­ti­va. A tal fine si utilizza invece una versione ridotta al minimo che i browser sono in grado di caricare più ve­lo­ce­men­te.