SASS, CSS with superpowers

Da buoni designer sappiamo già quanto i fogli di stile abbiano cambiato il mondo dei siti web liberandoci da tutti quei fastidiosi attributi inline che utilizzavamo fino a prima del loro avvento.

Il mondo del web è in costante fermento, lo sappiamo, e mai come negli ultimi anni ci siamo ritrovati a rivedere completamente il nostro modo di progettare e pianificare un sito; basti solo pensare al layout responsive che ha affiancato il layout fluido e a tutti i selettori/attributi di nuova generazione per non parlare delle griglie dei vari framework, Bootstrap in prima linea.

Pensiamo per esempio all’utilizzo di Bootstrap: oltre ai soliti noti problemi di compatibilità con i vecchi browser la cosa certa è che nella migliore delle ipotesi in un sito web utilizziamo un’infinità di processi che non ci servono praticamente a nulla, l’effettivo utilizzo delle potenzialità proposte dal framework sarà si e no poco oltre il 10%. Allo scopo di mettere ordine nei nostri fogli di stile arrivano in soccorso i preprocessori di CSS.

Ma cos’è un preprocessore di CSS? Semplicemente uno strumento che si occupa di generare un foglio di stile pre-processando in forma aggregata uno struttura prodotta da uno sviluppatore.

Ne esistono ovviamente diversi ma quello più famoso è probabilmente SASS, acronimo di Syntactically Awesome StyleSheets. Per poter utilizzare SASS è necessario installarlo da linea di comando con una procedura tutto sommato piuttosto semplice che richiede però la presenza di Ruby, un linguaggio di programmazione dinamico orientato agli oggetti, che è già presente di default nei sistemi operativi OS X e che va invece installato con diverse modalità in tutti gli altri.

SASS può essere utilizzato in due differenti modalità; la prima punta a rendere meno complessa la struttura dal punto di vista della sintassi mentre la seconda, più moderna e utilizzata, punta ad estendere il classico foglio di stile e prende il nome di SCSS.

In parole povere e senza soffermarci su esempi di cui il web è già strapieno i nostri file in estensione .SCSS si occupano di generare in output la compilazione dei corrispettivi omonimi in estensione .CSS.

Per i browser di nuova generazione esiste l’istruzione sourceMappingURL (commentata non essendo una specifica css) che va a indicare che il file css in uso è generato automaticamente e le sue informazioni generali possono essere recuperate attraverso il file app.css.map che SASS ha generato.

Questo articolo non ha lo scopo, ovviamente, di insegnarvi a utilizzare SASS ma semplicemente di incuriosirvi quel tanto che basta per approfondire l’argomento. Il sito ufficiale, sass-lang.com, ci mostra in apertura uno spot semplice ed efficace che non lascia possibilità di pensare che la dichiarazione non corrisponda a realtà:

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Avete ancora dei dubbi in proposito? Rimanendo in tema di sviluppo per chi come me oltre a sviluppare siti interamente a codice fa ampio utilizzo di WordPress un occhio di riguardo va sempre dato alle novità in arrivo dal più famoso dei cms che ci propone da ieri la release della versione 4.3 in fase beta 2; la beta 1 era stata pubblicata il 2 luglio corrente.

Visti i precedenti con 4.1 e 4.2 ci aspettiamo la security release entro l’autunno o sicuramente prima del 2016.

Non mi rimane che augurarvi un buon lavoro e una splendida giornata e come dice sempre il buon Dave Gahan: see you next time.