Sass: il nuovo approccio ai fogli di stile

Sass è un meta-linguaggio utilizzato per scrivere un documento CSS in modo pulito e strutturalmente corretto. Il pensiero comune di chi si avvicina a Sass è che questo processore possa ostacolare e interrompere il flusso di lavoro, ma invece può rendere la vita molto più facile. La realtà è che Sass (come altri processori CSS) può essere un potente alleato, uno strumento che ogni frontend- developer può facilmente inserire nel proprio lavoro quotidiano. Così, mentre un normale CSS non consente ancora cose come le variabili e mixins (blocchi riutilizzabili di stili) Sass prevede una sintassi che fa tutto questo, in aggiunta al normale CSS. Gli “ostili” a Sass sono coloro che si pongono le seguenti domande: ho bisogno di conoscere Ruby o comandi avanzati della riga di comando ? Avrò bisogno di cambiare completamente il modo in cui ho scritto i fogli di stile? Sass è scritto in Ruby, e distribuito tramite il gestore dei pacchetti di Ruby. Se avete già familiarità con Ruby potete trovare le istruzioni per l'installazione sul sito ufficiale. La compilazione dei file CSS delle regole assegnate nei file Sass, avverrà tramite Compass, attraverso il comando: compass watch Chissà quante volte vi sarà capitato, per la fretta, di dimenticare qualche parentesi o qualche punto e virgola, passando le ore successive a cercare quell’errore che si nasconde tra i vostri file CSS. Compass bloccherà la compilazione del file CSS, avvertendovi tramite terminale dell’errore, indicando anche un suggerimento della linea di comando al quale potete trovarlo. Il rovescio della medaglia è che Sass non risolverà tutti i vostri problemi: fogli di stile inefficienti e male organizzati possono essere altrettanto inefficiente quando si utilizza Sass. Una buona organizzazione e uno studio di lavoro intelligente è una buona pratica da adottare prima di iniziare a mettere mano ai codici. Se usato correttamente e con intelligenza, Sass può essere un leale compagno nella creazione di fogli stile ideali. La sintassi, “SCSS“, utilizza la formattazione a blocchi come quello di CSS: esso utilizza le parentesi per indicare blocchi di codice e punti e virgola per linee separate all'interno di un blocco. CSS3 consiste in una serie di selettori e pseudo-selettori che raggruppano regole ad essi applicabili, mentre Sass estende CSS, fornendo vari meccanismi disponibili nei linguaggi di programmazione più tradizionali, lingue particolarmente orientate agli oggetti, ma che non sono disponibili nel semplice CSS3. Chi decide di iniziare a lavorare con Sass deve tenere a mente tutti gli insegnamenti di CSS3 con l’aggiunta di pratiche scorciatoie: • $VARIABILI: memorizzano le informazioni che si desidera riutilizzare su tutto il vostro foglio di stile(colori, denominazioni, pile di carattere, ecc...) • ANNIDAMENTO: Sass vi permetterà di creare dei nidi dai vostri selettori, in un modo che segua la stessa gerarchia visiva del codice HTML. Bisogna essere consapevoli del fatto che le regole eccessivamente nidificate si tradurranno in un CSS complesso. • MIXINS: consentono di effettuare gruppi di dichiarazioni CSS che si desidera riutilizzare in tutto il sito. • FILE PARZIALI: È possibile creare fileparziali Sass che contengono piccoli frammenti di CSS che è possibile includere in altri file Sass . Questo è un ottimo modo per modularizzare CSS e gestire al meglio il lavoro. Un partial-file è semplicemente un file denominato Sass con una sottolineatura iniziale (esempio: _partial.scss). I parziali Sass vengono utilizzati con la direttiva @import. Ma come si dovrebbero strutturare i progetti Sass ? Esiste un modo standard di separare i file CSS ? Non esistono regole predefinite: di norma, si consiglia di creare un file generale che richiamerà tramite @import tutti i file parziali suddivisi per aree.
 Nell’esempio vediamo che “style.scss” è il file master al cui interno troveremo i seguenti comandi: @import “custom.bootstrap“; //file for banner animations @import “animations“; // all the website styles @import “general“; // bootstrap fix, general style for pages and commons (link, buttons, etc etc) @import “header“; // style for node details (style for webforms is here!) @import “nodes“; // style for homepage slider and internal slider @import “sliders“; @import “footer“; @import “landing“; Nel file _variabile.scss, _mixins.scss e _animation.scss saranno presenti rispettivamente le variabili, i mixins e le animazioni di tutto il vostro progetto, mentre i file _footer.scss ed _header.scss conterranno le regole relative alle zone indicate dal nome stesso. La suddivisione del progetto in file parziali rende semplice l’individuazione dell’area che ci interessa stilizzare o modificare senza essere costretti a cercare tra righe e righe di CSS. Sia che voi siate esperti frontender o alle prime armi Sass diventerà in breve tempo il vostro fedele complice.