SASS: un CSS di livello più elevato?

Con i CSS siete in grado di progettare siti web secondo le vostre idee. Ma il linguaggio dei fogli di stile ha i suoi limiti. Molti web designer desiderano un modo più confortevole per progettare siti web. Ecco che entrano in gioco i preprocessori CSS. Con l'aiuto di un linguaggio di fogli di stile, che è una sorta di estensione dei CSS sottostanti, è possibile semplificare notevolmente il lavoro di progettazione. Il più noto di questi linguaggi estesi è SASS. Ma cosa si nasconde dietro ai Syntactically Awesome Style Sheet?

Per capire cos'è SASS e a cosa serve è prima necessario capire la funzione del linguaggio CSS. Innanzitutto va specificato che tutti i siti web sono basati sul linguaggio di markup HTML. Per progettare il layout di una pagina web usando HTML si collega il contenuto direttamente al design; questa operazione va fatta per ogni singola pagina HTML.

L'HTML non è stato pensato per la progettazione del design delle pagine e in questo senso è molto limitato. Per questo motivo a tal fine viene utilizzato il Cascading Style Sheet (CSS), il quale ha il compito di definire la rappresentazione 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 intestazioni 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 solitamente memorizzate in un file separato a cui fanno riferimento le pagine HTML. In questo modo si riduce notevolmente la quantità di informazioni per pagina.

Ma il CSS ha i suoi limiti che diventano evidenti soprattutto quando si lavora con il linguaggio per molti anni. Il vantaggio del CSS è allo stesso tempo uno dei suoi svantaggi: la semplicità di linguaggio. SASS, invece, rende il tutto un po' più sofisticato e semplifica enormemente il lavoro di creazione del design.

Tutti i moderni browser possono visualizzare 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 preprocessore. Il codice nel documento SASS viene convertito in CSS prima che il sistema fornisca il codice sorgente e quindi il sito web.

Di primo acchito l’esistenza di SASS sembrerebbe superflua. Del resto grazie al CSS negli ultimi decenni si sono potute sviluppare pagine web eccellenti sia da un punto di vista tecnico che di design. Anche volendo continuare a lavorare con SASS, non è possibile evitare il CSS. Il noto linguaggio dei fogli di stile rimarrà la base della rappresentazione visiva anche in futuro. SASS e gli altri linguaggi altro non sono che strutture basate sulle fondamenta costituite dal CSS.

SASS offre le seguenti opzioni che il CSS non ha:

• Variabili: con SASS potete salvare informazioni sotto forma di variabili per un successivo riutilizzo. Ad esempio, è possibile memorizzare centralmente un valore di colore sotto una variabile, più facile da modificare.
• Funzioni matematiche: in SASS è possibile servirsi di operatori matematici come +, -, *, / e % per determinare le dimensioni.
• Funzioni: altre funzioni alleggeriscono la progettazione del design, ad esempio si possono adattare valori di colore e analizzare elenchi.
• Cicli: un ulteriore vantaggio di SASS è la possibilità di utilizzare i loop, che si ripetono fino a raggiungere lo stato definito.
• Distinzioni di caso: le indicazioni if ed else funzionano in maniera analoga. I comandi vengono applicati solo in determinate condizioni.
• Mixin: i cosiddetti mixin rappresentano dei modelli da creare autonomamente oppure da integrare nel codice durante l’utilizzo di un framework.
• Indentazione: il SASS originale (al contrario del SCSS) lavora con indentature e interruzioni di riga per dare una struttura al codice. Non sono necessarie parentesi per contrassegnare gli annidamenti né punti e virgola per segnalare la fine della riga.
• Annidamenti: il linguaggio dei fogli di stile non consente di lavorare con gli annidamenti (nesting). SASS invece dà all’utente la possibilità di rappresentare dipendenze anche visivamente, il che riduce ridondanze e fa risparmiare tempo di scrittura.
• Eredità: un selettore ha la capacità di ereditare caratteristiche 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 cosiddetti 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 progettate un sito web.

Affinché il codice SASS raggiunga l'effetto desiderato, dovete prima convertirlo in CSS. La compilazione funziona semplicemente 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 automaticamente 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 regolarmente delle modifiche. SASS offre la possibilità di monitorare cartelle e file con il parametro --watch. Se si apportano modifiche, il sistema li compila automaticamente aggiornandoli.

Non c'è una sola sintassi in cui è possibile utilizzare SASS, ma due: in primo luogo, vi è la forma originale, spesso chiamata indented syntax ("sintassi indentata") o semplicemente "SASS". Inoltre, vi è una variante più recente, più orientata alle specifiche 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 differenza più grande è l'uso di parentesi e punti e virgola.

La sintassi originale di SASS funziona con indentature e interruzioni di riga, una procedura simile allo YAML. Per completare una riga di codice è sufficiente effettuare una nuova riga premendo il tasto Invio. Le interruzioni di riga funzionano semplicemente tramite il tabulatore. Cambiando la posizione nel carattere, si formano dei raggruppamenti: i cosiddetti blocchi di dichiarazione. Questa operazione non è possibile nel CSS, dove vanno utilizzate parentesi graffe per i raggruppamenti e i punti e virgola per le dichiarazioni di proprietà. E questo è esattamente ciò di cui anche la SCSS ha bisogno.

Così si crea come una sorta di “guerra religiosa”: alcuni utenti prediligono la facilità d'uso di SASS originale, dove non è necessario prestare attenzione al corretto posizionamento delle parentesi quando si spostano i frammenti di codice sorgente e generalmente si crea un codice più sottile e chiaro. Nel complesso la sintassi indentata fa risparmiare caratteri e righe. I sostenitori di SCSS, dal canto loro, sono invece felici di accettare di impegnarsi maggiormente, perché è più simile a quello che già conoscono dal CSS.

SCSS è un sovrainsieme 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ò completamente 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 conversione è molto più semplice. Anche se SASS supporta entrambe le sintassi, ogni singolo progetto vi pone davanti a un bivio: quale estensione scegliere. Per poter distinguere tra i diversi formati, infatti, ai file viene data l'estensione .sass o .scss.

SASS ha una serie di vantaggi da offrire, eppure il preprocessore non riesce comunque a convincere tutti quanti. I suoi vantaggi sono evidenti: il linguaggio del preprocessore offre all'utente maggiori possibilità di creare il codice. Ad esempio molti web designer apprezzano la funzione di memorizzare i colori in variabili, invece di dover sempre specificare il valore del colore in un numero esadecimale.

Mixin, variabili, eredità e nesting rendono molto più facile seguire il principio “Don’t repeat yourself” (“Non ripetetevi”) rispetto ai CSS tradizionali. Questa teoria raccomanda di evitare ripetizioni nel codice, mantenendo così il codice sorgente più snello. Inoltre, questo riduce drasticamente lo sforzo necessario per effettuare eventuali modifiche: invece di doverle apportare in diversi punti, infatti, basta fare un cambiamento a livello centrale solo in una posizione.

In linea di principio gli svantaggi di SASS si applicano a ogni preprocessore e si riferiscono 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 direttamente nel file CSS e vedere gli effetti immediatamente sul sito web, le modifiche al design devono prima essere tradotte in CSS. In questo modo si rischia l’insinuarsi di errori indesiderati; inoltre il debug viene reso più complicato.

Oltre a ciò prima di utilizzare SASS (come per qualsiasi tecnica a voi sconosciuta) dovete investire tempo e fatica nell'apprendimento di un nuovo linguaggio. Oltre al CSS, che occorre comunque padroneggiare, c'è un altro linguaggio con cui bisogna aver dimestichezza.

Oltre a SASS, nei circoli dello sviluppo si è affermato anche LESS: questo linguaggio di fogli di stile è più orientato ai CSS e quindi più simile alla sintassi degli SCSS. I due preprocessori condividono alcune caratteristiche: SASS e LESS prevedono l'uso di mixin e variabili. Una differenza, tuttavia, è che SASS si basa su Ruby e LESS su JavaScript. Ma anche questo non dà a nessuno dei due preprocessori un vantaggio sull'altro.

Le vere differenze si possono trovare nelle funzioni logiche: LESS permette agli utenti di attivare i mixin solo quando si verificano situazioni specifiche. Per quanto si tratti di una funzione utile, l'uso dei collegamenti logici in LESS si limita a questo. SASS, al contrario, offre cicli e distinzioni di casi che sono familiari ai linguaggi di programmazione.

Con SASS gli utenti sono liberi di scegliere se usare una sintassi indentata o SCSS. Così ogni sviluppatore può decidere autonomamente se allontanarsi dalle regole del CSS o rimanere più vicino all'originale. Con LESS non c'è questa scelta, poiché gli utenti devono rispettare le regole note. Il codice in LESS è automaticamente un sovrainsieme 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 inizialmente supportato dal popolare front end framework Bootstrap, che si basava sul preprocessore più giovane. Ma con la versione 4 il progetto è ufficialmente passato a SASS, che dovrebbe aumentare ulteriormente la popolarità dei Syntactically Awesome Style Sheets dal punto di vista sintattico.