SASS: come potenziare lo sviluppo di CSS

Negli scorso articoli, abbiamo parlato di Angular e di uno stile di sviluppo più veloce e ordinato.

Per continuare sulla scia della semplicità ed efficacia per lo sviluppo delle nostre applicazioni e progetti web, non posso non introdurre l’argomento SASS (Syntactically Awesome StyleSheets), strumento che ho cominciato a utilizzare da qualche mese e di cui ormai non potrei più fare a meno.

La sua alternativa è LESS.

SASS può essere utilizzato da chiunque abbia una conoscenza basilare di css e preferibilmente una minima conoscenza di programmazione.

Di cosa stiamo parlando?

SASS è un pre-processore CSS, in poche parole permette di utilizzare un linguaggio molto più potente e intelligente di CSS. Una volta compilato, genererà un file CSS che potrà poi essere utilizzato nella nostra applicazione web.

Il linguaggio che andrò a utilizzare si chiama SCSS: ha una sintassi che somiglia molto a quella del CSS, ma aggiunge alcune funzioni tipiche dei linguaggi di programmazione.

Muoviamo i primi passi: l’installazione

Qualsiasi sistema operativo abbiate, potrete installare SASS senza problemi. L’unico requisito è aver installato Ruby, in quanto SASS è una gemma Ruby.

  • Se possediamo un Mac non è necessario fare alcuna operazione preliminare.
  • Per chi utilizza Linux (distribuzioni Debian/Ubuntu) è necessario installare Ruby. Apriamo quindi il terminale e digitiamo:
    sudo apt-get install ruby1.9.1
    
  • Nel caso di Windows, è reperibile online un installer che è sufficiente scaricare o installare.

Qualsiasi sistema operativo abbiate, una volta svolte le operazioni preliminari, aprite il terminale e digitate:

gem install sass

Se su Mac o Linux apparisse un messaggio di errore, riprovate con:

sudo gem install sass

A questo punto possiamo verificare l’avvenuta installazione di SASS lanciando questo comando:

sass -v

Se tutto è andato a buon fine, dovrebbe stampare un messaggio simile a Sass 3.2.12 (Media Mark).

Utilizzare SASS

Per iniziare, creiamo un file scss: per esempio, style.scss.

Il contenuto di questo file verrà compilato e il risultato finale sarà un file style.css.

Per fare questo ci sono due strade:

  1. Come prima opzione, bisogna aprire il terminale e posizionarsi sulla cartella dove è stato creato il file scss (per navigare nelle cartelle tramite terminale si deve utilizzare il comando cd); a questo punto si lancia il comando:
    sass style.scss style.css
    

    SASS compilerà il file scss generando il file css, che potremo poi utilizzare nelle nostre pagine.

  2. L’alternativa è dire a SASS di continuare a guardare il file style.scss e di compilarlo nel file style.css ogni volta che salviamo, in questo modo:
    sass --watch style.scss:style.css
    

CSS addio, benvenuto SASS

Ora che si hanno tutti gli strumenti per utilizzare SASS correttamente, non resta che mostrarvi i vantaggi che si hanno nell’utilizzare un preprocessore, in particolare SASS.

Per apprezzarne i benefici non sono necessarie demo, ma solo la conoscenza di css.

Variabili

In scss abbiamo la possibilità di utilizzare le variabili, con una sintassi simile a PHP.

Le variabili avranno sempre il $ come primo carattere, il resto della sintassi è uguale al CSS tradizionale.

L’utilizzo è molto intuitivo: carico la variabile con un valore e lo riutilizzo in un secondo momento.

Ecco un esempio:

$primaryColor: #123456;
h1{
	color:$primaryColor;
}
div.colorato{
	border: 1px $primaryColor solid;
}

Si comprende subito che, in questo caso, cambiando il valore della variabile cambierà dappertutto il colore primario.

Annidamento

Una delle cose che personalmente apprezzo di più è questa: la possibilità di annidare i selettori con i relativi stili.

Prendiamo come esempio un css:

p.grigio{
	color:gray;
}
p.grigio > a{
	color:black;
}
p.grigio>a:hover{
	color:red;
}

Con l’annidamento in SASS possiamo ridurlo a questo:

p.grigio{
	color:gray;
	>a{
		color:black;
		&:hover{
			color:red;
		}
	}
}

Che, compilato, risulterà come nell’esempio precedente.

In questo esempio ho utilizzato anche il selettore &, che se inserito nel blocco di stile di un selettore indica se stesso.

Quindi &:hover nel blocco di stile del selettore >a equivale ad >a:hover che, trovandosi a sua volta nel blocco di stile del selettore p.grigio, equivale a p.grigio>a:hover.

Ereditarietà

Con scss possiamo creare un selettore che eredita gli stili da un altro selettore.

Questo vantaggio aiuta a scrivere codice secondo la metodologia OOCSS, che consiste nell’utilizzo delle classi di stili, creando dei modelli di stile riutilizzabili.

Questo avviene per l’appunto utilizzando l’attributo class anche nei tag html in modo quasi esagerato:

<div class=”text-left pull-right warning”>...

Per cui saranno definiti tre stili riutilizzabili:

  1. uno che allinea il testo a sinistra
  2. uno che sposta il div a destra
  3. warning che probabilmente imposterà un testo o uno sfondo di colore arancione

Avere una serie di classi già pronte aiuta a velocizzare lo sviluppo e ridurre le ripezioni nel css (metodologia DRYCSS), ma torniamo a SASS.

Con SASS possiamo ereditare i componenti da un altro selettore; per esempio, prendiamo la classe warning.

Supponiamo che, oltre una a versione base, ne vogliamo realizzare una con un bordo che chiameremo warning-bordered, in questo modo:

.warning{
	color:orange;
}
.warning-bordered{
	@extend .message;
	border:2px orange solid;
	padding:8px;
}

Operatori

SASS permette anche di fare operazioni matematiche sui dati numerici, quindi sulle grandezze.

Gli operatori che ci mette a disposizione sono: +, -, /, * e %.

Risulta particolarmente utile per calcolare le percentuali:

width: 300px / 960px * 100%;

che risulterà in css:

width: 31.25%;

Mixins

I mixins sono vere e proprie funzioni utilizzabili in scss.

Prendendo l’esempio proposto direttamente sul sito ufficiale, che trovo molto utile:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

Possiamo dedurre molto facilmente la sintassi:

  • @mixin nomeMixin($parametro) per dichiare un mixin
  • @include nomeMixin(valore) per utilizzarlo all’interno dei nostri stili

Il risultato css sarà così:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

I commenti

Possiamo utilizzare i commenti con la sintassi classica CSS: /* COMMENTO */

Oppure con la sintassi tipica dei linguaggi di programmazione : //commento.

Conclusioni

Come avrete potuto notare, SASS ci fa risparmiare molto tempo, molte ripezioni css e di conseguenza molte righe di codice. Inoltre, rende i file css più leggibili, riutilizzabili e dinamici.

Questo articolo introduce i concetti di SASS ma non spiega nel dettaglio tutte le funzioni.

Se siete interessati all’argomento e avete voglia di approfodire, potete trovare la documentazione completa qui.

Per chi vuole sfruttare al massimo SASS, potete utilizzare librerie di mixin già pronti come compass che miglioreranno ulteriormente la nostra esperienza di sviluppo.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag:

L'autore

Diplomato in informatica, inizia la sua esperienza di web developer all’età di 17 anni con le prime collaborazioni. Attualmente Wordpress, Symfony, Bootstrap e AngularJS compongono le sue giornate insieme a vari caffè. Ama sviluppare e collaborare con i creativi; tolto il lavoro la sua passione sono le moto.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Altri articoli

Ecco qualche altro articolo che potresti trovare interessante:

8 commenti

    • Giacomo

Trackback e pingback

  1. SASS: come potenziare lo sviluppo di CSS | Your...
    […] Negli scorso articoli, abbiamo parlato di Angular e di uno stile di sviluppo più veloce e ordinato.Per continuare sulla …

Lascia un Commento

Current day month ye@r *