Massimiliano Carnevale

Massimiliano Carnevale

Co-Founder
Stile e grafica

Sintassi e prime basi SASS: seconda parte

Primi esempi pratici di codice per SASS, il pre-processore di CSS - seconda parte

Pubblicato il 22/09/2015

Abbiamo visto nella prima parte di questo articolo alcuni dei grossi vantaggi che SASS regala agli sviluppatori (se non l'avete ancora letto vi consiglio di farlo al più presto!); continuiamo il discorso vedendone uno che vi semplificherà la vita enormemente

 

Le funzioni (mixins) di SASS

Il principio che c'è dietro nei mixins è lo stesso delle classi nei linguaggi di sviluppo: creare codice facilmente riutilizzabile, scalabile ed utilizzabile in molti ambiti.

Partiamo anche qui con un esempio: immagino abbiate già incontrato i cosiddetti prefissi dei browser (o vendor prefix); per chi non sa cosa siano vi ricordo che sono quei prefissi che i vari fornitori di browser utilizzano per sperimentare e testare nuove proprietà senza creare problemi di retrocompatibilità (qui trovate maggiori informazioni).
Prendiamo il caso della proprietà border radius: la sintassi corretta affinché possiamo esser sufficientemente certi che tale proprietà funzioni sulla maggior parte dei browser è del tipo:

codice CSS
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

Capirete bene che ogni volta che aggiungiamo una sintassi simile perdiamo molto tempo e il rischio di commettere errori, soprattutto in modifica, è alto (a chi non è capitato di correggere un errore su webkit lasciandolo in mozilla?). Di solito una sintassi simile, inoltre, mostra tutta la pigrizia di noi sviluppatori: la vocina che dice "Ehi, dai, non ti ci impicciare troppo, fregatene di opera, su.. chi lo usa?" diventa terribilmente presente. E se tale sintassi la troviamo in un solo punto del codice, la vocina la mettiamo a tacere, se il codice è pieno di funzioni del genere anche i santi tendono a seguirla...

Che fare allora? Semplice: si usano i mixins di SASS! Vediamo come

codice SCSS
@mixin border-radius($raggio) {
	-webkit-border-radius:$raggio;
	-moz-border-radius:$raggio;
	-ms-border-radius:$raggio;
	-o-border-radius:$raggio;
	border-radius:$raggio;}

Tale codice è la definizione del mixin: in pratica diciamo al compilatore che esiste tale funzione e che, una volta chiamata passandogli un valore, debba esser compilata con le regole scritte al suo interno. I mixins si richiamano così:

codice SCSS
.classe {@include border-radius(10px);}

Abbiamo già inserito in alcuni articoli tale notazione: qui troverete delle forme speciali css, ad esempio. Basta copiare il mixins e, quando necessario richiamarlo con le variabili desiderate per ottenere con semplicità la forma voluta.

Ora, immaginate che bello se esistesse un modo per salvare dei mixins in un file per poter richiamare quello desiderato quando necessario? Ok, so che lo intuisci: questo modo esiste ed è un'altra delle feature di SASS:

 

L'importazione di file e di librerie in SASS

In SASS basta usare il comando

@import "libreria.scss"

per poter avere tutto il codice presente nel file libreria.scss direttamente disponibile. Il vantaggio è ovvio a questo punto: potremmo salvare su un file ad hoc le funzioni che utilizziamo più spesso, importarlo, e utilizzarlo in ogni nostro progetto. Se, in futuro, volessimo aggiungere altre funzioni alla libreria ci basterebbe modificare solo questo file per esser sicuri di poterlo avere a disposizione in ogni nuovo progetto che avremo.
Hint: Vi consiglio di chiamare il file di libreria con un _ davanti: _libreria.scss ad esempio e includerla con @import "libreria.scss": in tal modo SASS comprende che il file _libreria.scss è un file di inclusione e non compila il .css libreria.css.

A questo punto si aprono moltissime strade: esistono infatti numerosissime librerie per SASS che vi permetteranno di scrivere codice alla velocità della luce. Tra le più usate ci sono di sicuro:

...e poi c'è Compass.

 

Cos'è compass?

Beh, Compass è LA libreria. Anzi, per dirla meglio, Compass è un framework per SASS. Si installa a parte e mette a disposizione tutti, e dico tutti, gli strumenti utili per estendere SASS e lavorare su qualsiasi aspetto con una semplicità assoluta. Come dicono gli sviluppatori del progetto: Compass sta ai CSS come jQuery sta al javascript. E se tale frase può sembrare un po' promozionale, vi assicuro che non lo è. Compass è uno strumento fondamentale per gli sviluppatori di UI. Vi consiglio di fare un giro sul sito ufficiale e guardare gli esempi e i tutorial per farvi un'idea. Anche qui, spero di avere il tempo per scrivere un articolo ad hoc.

Abbiamo terminato la panoramica sulle principali funzioni di SASS. Ma SASS non è solo questo: ha funzioni native per modificare i colori, le stringhe, permette l'uso di script, gestisce i selettori in modo avanzato e molto altro ancora. Probabilmente in futuro scriveremo articoli di approfondimento per questi e altri aspetti pertanto: continuate a seguirci.

Altri articoli sullo stesso argomento
CONDIVIDI SUI SOCIAL
Ueppy Blog

Leggi articoli correlati

Stile e grafica

CSS: creare etichette a 45 gradi senza l'uso di immagini

Ovvero, come creare ribbon per il tuo ecommerce con il solo aiuto di CSS3 e un po' di trigonometria.

Leggi l'articolo
Stile e grafica

Le animazioni con i CSS3

Ruotare, spostare, muovere gli oggetti con i CSS: oggi si può con le regole animation.

Leggi l'articolo
Stile e grafica

Figure CSS speciali: fumetto, cuore, infinito e altre forme complesse

Terza parte riguardante la creazione di figure geometriche con il solo aiuto di CSS. Anche in questo caso proponiamo l'astrazione delle stesse via SCSS.

Leggi l'articolo
Stile e grafica

Sintassi e prime basi SASS: parte prima

Primi esempi pratici di codice per SASS, il pre-processore di CSS - parte prima

Leggi l'articolo
Scopri Ueppy

Scopri Ueppy

un network di professionisti specializzati
nel web.

Scopri Ueppy
Contatta Ueppy
Contatta Ueppy VUOI COSTRUIRE UN NUOVO PROGETTO WEB?

Contatta Ueppy

Scrivici