SASS: un CSS di livello più elevato?

Con i CSS siete in grado di pro­get­ta­re siti web secondo le vostre idee. Ma il lin­guag­gio dei fogli di stile ha i suoi limiti. Molti web designer de­si­de­ra­no un modo più con­for­te­vo­le per pro­get­ta­re siti web. Ecco che entrano in gioco i pre­pro­ces­so­ri CSS. Con l'aiuto di un lin­guag­gio di fogli di stile, che è una sorta di esten­sio­ne dei CSS sot­to­stan­ti, è possibile sem­pli­fi­ca­re no­te­vol­men­te il lavoro di pro­get­ta­zio­ne. Il più noto di questi linguaggi estesi è SASS. Ma cosa si nasconde dietro ai Syn­tac­ti­cal­ly Awesome Style Sheet?

Per capire cos'è SASS e a cosa serve è prima ne­ces­sa­rio capire la funzione del lin­guag­gio CSS. In­nan­zi­tut­to va spe­ci­fi­ca­to che tutti i siti web sono basati sul lin­guag­gio di markup HTML. Per pro­get­ta­re il layout di una pagina web usando HTML si collega il contenuto di­ret­ta­men­te al design; questa ope­ra­zio­ne va fatta per ogni singola pagina HTML.

L'HTML non è stato pensato per la pro­get­ta­zio­ne del design delle pagine e in questo senso è molto limitato. Per questo motivo a tal fine viene uti­liz­za­to il Cascading Style Sheet (CSS), il quale ha il compito di definire la rap­pre­sen­ta­zio­ne delle pagine HTML.

Il CSS si trova nel codice HTML e determina il design di ogni elemento della pagina: font, colore del testo, sfondo; tutti gli elementi di design possono così essere definiti dal web designer. Ad esempio, per impostare tutte le in­te­sta­zio­ni con il font Calibri a 22 px, dovrete definirlo nel foglio di stile (style sheet), il quale fornisce le linee guida per l'aspetto del vostro sito web. Queste regole sono so­li­ta­men­te me­mo­riz­za­te in un file separato a cui fanno ri­fe­ri­men­to le pagine HTML. In questo modo si riduce no­te­vol­men­te la quantità di in­for­ma­zio­ni per pagina.

Ma il CSS ha i suoi limiti che diventano evidenti so­prat­tut­to quando si lavora con il lin­guag­gio per molti anni. Il vantaggio del CSS è allo stesso tempo uno dei suoi svantaggi: la sem­pli­ci­tà di lin­guag­gio. SASS, invece, rende il tutto un po' più so­fi­sti­ca­to e sem­pli­fi­ca enor­me­men­te il lavoro di creazione del design.

Tutti i moderni browser possono vi­sua­liz­za­re il CSS senza problemi, ma ciò non vale ancora per SASS (che è in uso da oltre 10 anni) o altri linguaggi di fogli di stile avanzati. Pertanto SASS si considera un pre­pro­ces­so­re. Il codice nel documento SASS viene con­ver­ti­to in CSS prima che il sistema fornisca il codice sorgente e quindi il sito web.

Di primo acchito l’esistenza di SASS sem­bre­reb­be superflua. Del resto grazie al CSS negli ultimi decenni si sono potute svi­lup­pa­re pagine web ec­cel­len­ti sia da un punto di vista tecnico che di design. Anche volendo con­ti­nua­re a lavorare con SASS, non è possibile evitare il CSS. Il noto lin­guag­gio dei fogli di stile rimarrà la base della rap­pre­sen­ta­zio­ne visiva anche in futuro. SASS e gli altri linguaggi altro non sono che strutture basate sulle fon­da­men­ta co­sti­tui­te dal CSS.

SASS offre le seguenti opzioni che il CSS non ha:

• Variabili: con SASS potete salvare in­for­ma­zio­ni sotto forma di variabili per un suc­ces­si­vo riu­ti­liz­zo. Ad esempio, è possibile me­mo­riz­za­re cen­tral­men­te un valore di colore sotto una variabile, più facile da mo­di­fi­ca­re.
• Funzioni ma­te­ma­ti­che: in SASS è possibile servirsi di operatori ma­te­ma­ti­ci come +, -, *, / e % per de­ter­mi­na­re le di­men­sio­ni.
• Funzioni: altre funzioni al­leg­ge­ri­sco­no la pro­get­ta­zio­ne del design, ad esempio si possono adattare valori di colore e ana­liz­za­re elenchi.
• Cicli: un ulteriore vantaggio di SASS è la pos­si­bi­li­tà di uti­liz­za­re i loop, che si ripetono fino a rag­giun­ge­re lo stato definito.
• Di­stin­zio­ni di caso: le in­di­ca­zio­ni if ed else fun­zio­na­no in maniera analoga. I comandi vengono applicati solo in de­ter­mi­na­te con­di­zio­ni.
• Mixin: i co­sid­det­ti mixin rap­pre­sen­ta­no dei modelli da creare au­to­no­ma­men­te oppure da integrare nel codice durante l’utilizzo di un framework.
• In­den­ta­zio­ne: il SASS originale (al contrario del SCSS) lavora con in­den­ta­tu­re e in­ter­ru­zio­ni di riga per dare una struttura al codice. Non sono ne­ces­sa­rie parentesi per con­tras­se­gna­re gli an­ni­da­men­ti né punti e virgola per segnalare la fine della riga.
• An­ni­da­men­ti: il lin­guag­gio dei fogli di stile non consente di lavorare con gli an­ni­da­men­ti (nesting). SASS invece dà all’utente la pos­si­bi­li­tà di rap­pre­sen­ta­re di­pen­den­ze anche vi­si­va­men­te, il che riduce ri­don­dan­ze e fa ri­spar­mia­re tempo di scrittura.
• Eredità: un selettore ha la capacità di ereditare ca­rat­te­ri­sti­che da un altro selettore. Anche in questo modo si risparmia tempo di scrittura e il codice risulta più leggero.
• File condivisi: per integrare elementi del codice in un file SASS potete ricorrere a co­sid­det­ti partials, ovvero file che devono contenere solo alcune righe di CSS e che vengono importate tramite comando in un file SASS.

Alcuni framework e librerie utili esistono già per SASS: Compass e Bourbon vi tolgono molto lavoro quando pro­get­ta­te un sito web.

Affinché il codice SASS raggiunga l'effetto de­si­de­ra­to, dovete prima con­ver­tir­lo in CSS. La com­pi­la­zio­ne funziona sem­pli­ce­men­te tramite una riga di comando:

Questo comando compila il codice sorgente del file esempio.sass che avete creato in un nuovo file CSS. La sintassi di SASS si adatta au­to­ma­ti­ca­men­te alle regole del CSS. Ad esempio, le eredità vengono risolte e la sintassi viene adeguata.

Solo raramente si può dire che il lavoro su un sito web sia veramente completo, anzi, in certi casi al design si apportano re­go­lar­men­te delle modifiche. SASS offre la pos­si­bi­li­tà di mo­ni­to­ra­re cartelle e file con il parametro --watch. Se si apportano modifiche, il sistema li compila au­to­ma­ti­ca­men­te ag­gior­nan­do­li.

Non c'è una sola sintassi in cui è possibile uti­liz­za­re SASS, ma due: in primo luogo, vi è la forma originale, spesso chiamata indented syntax ("sintassi indentata") o sem­pli­ce­men­te "SASS". Inoltre, vi è una variante più recente, più orientata alle spe­ci­fi­che del CSS e quindi chiamata Sassy CSS (SCSS), cioè CSS nello stile di SASS. Con la versione 3 di SASS, SCSS è stata definita come sintassi ufficiale. La dif­fe­ren­za più grande è l'uso di parentesi e punti e virgola.

La sintassi originale di SASS funziona con in­den­ta­tu­re e in­ter­ru­zio­ni di riga, una procedura simile allo YAML. Per com­ple­ta­re una riga di codice è suf­fi­cien­te ef­fet­tua­re una nuova riga premendo il tasto Invio. Le in­ter­ru­zio­ni di riga fun­zio­na­no sem­pli­ce­men­te tramite il ta­bu­la­to­re. Cambiando la posizione nel carattere, si formano dei rag­grup­pa­men­ti: i co­sid­det­ti blocchi di di­chia­ra­zio­ne. Questa ope­ra­zio­ne non è possibile nel CSS, dove vanno uti­liz­za­te parentesi graffe per i rag­grup­pa­men­ti e i punti e virgola per le di­chia­ra­zio­ni di proprietà. E questo è esat­ta­men­te ciò di cui anche la SCSS ha bisogno.

Così si crea come una sorta di “guerra religiosa”: alcuni utenti pre­di­li­go­no la facilità d'uso di SASS originale, dove non è ne­ces­sa­rio prestare at­ten­zio­ne al corretto po­si­zio­na­men­to delle parentesi quando si spostano i frammenti di codice sorgente e ge­ne­ral­men­te si crea un codice più sottile e chiaro. Nel complesso la sintassi indentata fa ri­spar­mia­re caratteri e righe. I so­ste­ni­to­ri di SCSS, dal canto loro, sono invece felici di accettare di im­pe­gnar­si mag­gior­men­te, perché è più simile a quello che già conoscono dal CSS.

SCSS è un so­vrain­sie­me del CSS e ciò fa in modo che il codice CSS funzioni anche in SCSS, ma non il contrario. Le funzioni di SASS sono però com­ple­ta­men­te incluse. In questo modo è più facile lavorare con entrambi i linguaggi allo stesso tempo. Inoltre per chi già lavora con i CSS e si è abituato alla sintassi, la con­ver­sio­ne è molto più semplice. Anche se SASS supporta entrambe le sintassi, ogni singolo progetto vi pone davanti a un bivio: quale esten­sio­ne scegliere. Per poter di­stin­gue­re tra i diversi formati, infatti, ai file viene data l'e­sten­sio­ne .sass o .scss.

SASS ha una serie di vantaggi da offrire, eppure il pre­pro­ces­so­re non riesce comunque a con­vin­ce­re tutti quanti. I suoi vantaggi sono evidenti: il lin­guag­gio del pre­pro­ces­so­re offre al­l'u­ten­te maggiori pos­si­bi­li­tà di creare il codice. Ad esempio molti web designer ap­prez­za­no la funzione di me­mo­riz­za­re i colori in variabili, invece di dover sempre spe­ci­fi­ca­re il valore del colore in un numero esa­de­ci­ma­le.

Mixin, variabili, eredità e nesting rendono molto più facile seguire il principio “Don’t repeat yourself” (“Non ri­pe­te­te­vi”) rispetto ai CSS tra­di­zio­na­li. Questa teoria rac­co­man­da di evitare ri­pe­ti­zio­ni nel codice, man­te­nen­do così il codice sorgente più snello. Inoltre, questo riduce dra­sti­ca­men­te lo sforzo ne­ces­sa­rio per ef­fet­tua­re eventuali modifiche: invece di doverle apportare in diversi punti, infatti, basta fare un cam­bia­men­to a livello centrale solo in una posizione.

In linea di principio gli svantaggi di SASS si applicano a ogni pre­pro­ces­so­re e si ri­fe­ri­sco­no al fatto che il codice generato deve prima essere compilato. Questo aggiunge un altro passo avanti al processo di sviluppo e lo rende un po’ più noioso. Invece di essere in grado di apportare modifiche di­ret­ta­men­te nel file CSS e vedere gli effetti im­me­dia­ta­men­te sul sito web, le modifiche al design devono prima essere tradotte in CSS. In questo modo si rischia l’in­si­nuar­si di errori in­de­si­de­ra­ti; inoltre il debug viene reso più com­pli­ca­to.

Oltre a ciò prima di uti­liz­za­re SASS (come per qualsiasi tecnica a voi sco­no­sciu­ta) dovete investire tempo e fatica nell'ap­pren­di­men­to di un nuovo lin­guag­gio. Oltre al CSS, che occorre comunque pa­dro­neg­gia­re, c'è un altro lin­guag­gio con cui bisogna aver di­me­sti­chez­za.

Oltre a SASS, nei circoli dello sviluppo si è affermato anche LESS: questo lin­guag­gio di fogli di stile è più orientato ai CSS e quindi più simile alla sintassi degli SCSS. I due pre­pro­ces­so­ri con­di­vi­do­no alcune ca­rat­te­ri­sti­che: SASS e LESS prevedono l'uso di mixin e variabili. Una dif­fe­ren­za, tuttavia, è che SASS si basa su Ruby e LESS su Ja­va­Script. Ma anche questo non dà a nessuno dei due pre­pro­ces­so­ri un vantaggio sul­l'al­tro.

Le vere dif­fe­ren­ze si possono trovare nelle funzioni logiche: LESS permette agli utenti di attivare i mixin solo quando si ve­ri­fi­ca­no si­tua­zio­ni spe­ci­fi­che. Per quanto si tratti di una funzione utile, l'uso dei col­le­ga­men­ti logici in LESS si limita a questo. SASS, al contrario, offre cicli e di­stin­zio­ni di casi che sono familiari ai linguaggi di pro­gram­ma­zio­ne.

Con SASS gli utenti sono liberi di scegliere se usare una sintassi indentata o SCSS. Così ogni svi­lup­pa­to­re può decidere au­to­no­ma­men­te se al­lon­ta­nar­si dalle regole del CSS o rimanere più vicino al­l'o­ri­gi­na­le. Con LESS non c'è questa scelta, poiché gli utenti devono ri­spet­ta­re le regole note. Il codice in LESS è au­to­ma­ti­ca­men­te un so­vrain­sie­me di CSS, per cui qualsiasi codice sorgente formulato in CSS funziona anche in LESS, proprio come SCSS.

SASS è molto più popolare tra i web designer e ciò potrebbe essere dovuto al fatto che è un po’ più vecchio di LESS, il quale è stato ini­zial­men­te sup­por­ta­to dal popolare front end framework Bootstrap, che si basava sul pre­pro­ces­so­re più giovane. Ma con la versione 4 il progetto è uf­fi­cial­men­te passato a SASS, che dovrebbe aumentare ul­te­rior­men­te la po­po­la­ri­tà dei Syn­tac­ti­cal­ly Awesome Style Sheets dal punto di vista sin­tat­ti­co.