Guida a Sass in Italiano con approfondimento per Magento - Parte 1

I fondamenti di Sass dalla A alla Z

Metti i muscoli al tuo codice CSS

e inizia a sviluppare progetti che spaccano!

Tutti sappiamo cos’è Sass , vero? In caso non lo sapessi, te lo spiego brevemente. Prendiamo la definizione da Wikipedia.

Sass è un’estensione del linguaggio CSS che permette di utilizzare variabili, di creare funzioni e di organizzare il fogli di stile in più file.

Il linguaggio Sass si basa sul concetto di preprocessore CSS, il quale serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso.

In pratica, con Sass puoi

  • velocizzare di molto la scrittura di CSS
  • dare un’impressione di professionalità quando lavori con agenzie
  • essere aggiornato alle attuali tecnologie
  • usare delle variabili come in PHP
  • usare le funzioni come in PHP
  • creare la tua struttura o libreria base

Introduzione

Non so se tu, come me, sei uno di quelli che sono “fissati” con la “design coherence”. Se, come me, arrivi dal mondo della grafica e te ne intendi almeno un pochino, allora sai di cosa sto parlando.

La coerenza nel design è quella cosa che ti permette di non fare un sito “arlecchino”.

Se sei nato come me a metà degli anni ’80 o prima, ti ricorderai dei primi siti web che giravano in internet verso la metà degli anni ’90. Erano davvero un’accozzaglia di gif animate, fulmini, saette ed i sempre presenti pattern che rendevano il testo illeggibile (ma che facevano tanto fico all’epoca).

Oggi non si fanno più i siti con le gif animate e tutto è migliorat.. ah, hai detto Giphy? Ok si in effetti ci siamo involuti e siamo tornati agli anni ’90 in un certo senso.

La coerenza grafica, insomma, viene studiata nel design per mantenere un aspetto che abbia determinate caratteristiche 

  • deve dare un senso di pulizia, spazi ben progettati ed elementi simili tra di loro, coerenti
  • deve esprimere ordine, ad esempio seguendo la regola aurea
  • si deve percepire che i colori, le dimensioni dei font, gli spazi e tutti gli elementi riutilizzati costantemente, non sono messi a casaccio ma sono coerenti tra di loro e sempre uguali quando sono inseriti nello stesso contesto

Menu Guida Sass

Cosa non può fare il normale codice CSS

Immagina di realizzare un nuovo tema per la tua piattaforma preferita, ad esempio Magento.

In un sito ecommerce realizzato con Magento avremo le tradizionali pagine (homepage, categoria, prodotto, carrello, checkout) che tutte usano almeno una Call To Action.

Cosa è una Call To Action?

Questo è un esempio di area dove inserisco una Call To Action

Capita spesso, mentre si sviluppa, di dover graficare le varie Call To Action presenti nelle pagine del sito ecommerce, ovvero scrivere lo stesso codice CSS che ho usato per realizzare la CTA rossa come l’esempio sopra, per le varie pagine.

Questo capita perché il codice HTML è diverso da pagina a pagina. Quindi ci troviamo nella necessità di dover modificare il codice HTML inserendo, ad esempio, una classe CSS che abbiamo realizzato in precedenza.

Facciamo un esempio.

Abbiamo due codici HTML diversi, uno per la homepage e uno per la pagina prodotto. In uno scenario di questo tipo, con due codici HTML diversi, saresti costretto a scrivere una nuova regola CSS.

Oppure dovresti modificare il codice HTML per far combaciare lo stile delle call to action delle due pagine, ma sai bene quanto questa operazione possa essere difficile in piattaforme complesse come Magento, dove i blocchi annidati uno dentro l’altro sono molti ed è sicuramente più veloce creare una nuova regola CSS.

Cosa puoi fare con Sass

Con SASS standardizzare queste operazioni è molto più semplice, perché useresti quelle che lui chiama Mixin e che non sono altro che delle funzioni, ovvero un insieme di regole a cui viene assegnato un nome che tu puoi richiamare in qualsiasi momento e posto del tuo codice CSS/Sass. Non solo, con Sass puoi gettare le basi per ingegnerizzare al 100% il tuo tema, puoi creare il tuo bootstrap personale, ma non intendo un bootstrap modificato, intendo proprio il tuo! Potrai avere il completo controllo del tuo codice con una potenza mai vista e scrivere centinaia di righe di codice con poche semplici righe. In altre parole, Sass sta al CSS come jQuery sta al JavaScript, ti permette di scrivere di meno per fare molto di più.

Partiamo!

Come funziona il compilatore

Il browser interpreta i file CSS, non i file Sass, quindi ti serve un software che prenda questi file “più intelligenti” in formato sass e li trasformi in qualcosa “digeribile” dal browser.

Ma qual è il flusso, ovvero cosa succede ogni volta che usiamo il compilatore?

1. Lavori e fai modifiche al file Sass

Il compilatore, non appena hai salvato, legge il file .sass e genera un normale file con estensione .css, mettendolo nella cartella indicata da te in precedenza.

2. Il file .css era già incluso precedentemente

Quindi viene aggiornato alla nuova versione generata dal compilatore ed è pronto per essere letto dal browser.

3. Goditi le tue modifiche

Con i file compilati automaticamente e pronti all’uso, non devi sapere nient’altro, il browser legge il file css aggiornato con le ultime modifiche.

 

Installare e configurare il compilatore

Mi limiterò ad installare la versione per Mac che utilizzo, ovvero CodeKit, perché a parte la grafica del programma tutto sarà pressoché uguale in quasi tutti i software che troverai, sia gratuiti che a pagamento, sia su Windows.

Capito come si fa con uno, puoi replicarlo anche su Windows. Se riscontri qualche problema o ti blocchi in qualche punto, scrivimi sul gruppo Facebook sui Frontend Developer specializzati in ecommerce.

All’apertura, CodeKit si presenta vuoto, come nella schermata seguente.

A questo punto, clicca su “Add a Project” e CodeKit ti chiederà di indicargli la cartella del progetto.

Non devi selezionare tutta la cartella del progetto, come nel caso ad esempio di un sito Magento installato localmemente, perché dovrebbe “controllare” troppi file ed a noi interessa solo la cartella del tema.

Quindi selezioneremo la cartella:

skin > frontend > package > tema

così che CodeKit tenga sott’occhio tutti i file CSS e tutti i file JavaScript presenti.

Questo perché una volta che monitora una cartella, CodeKit ricompila in automatico i file Sass che modifchi, così che quando passi dal tuo editor al browser per vedere le modifiche, il tutto avviene in automatico.

Per ogni file, dovremo dire a CodeKit come deve comportarsi.

Nel nostro esempio, io ho creato nella mia cartella dei file Sass e Css un file chiamato “style.sass”.

Selezionandolo, compare la sidebar a destra con le opzioni che vedi nella schermata:

Andiamo ad analizzare le varie opzioni disponibili.

Output Style

Si tratta delle modalità con cui deve generare i file CSS. Se sei alle prime armi, ti consiglio di utilizzare le versioni più leggibili, ovvero Nested o Expanded.

Quando ti sentirai sicuro con il codice Sass, puoi usare direttamente la versione “Compressed”, che comprime il tuo file CSS generato e lo rende più leggero.

Debug Info

Si tratta di dire a CodeKit come deve comportarsi in caso di errori. Essendo compilato, Sass può generare degli errori ed in tal caso la generazione del file CSS fijnale viene interrotta ed il sistema ti avvisa che c’è un errore.

Mentre stai sviluppando e soprattutto stai imparando, il livello di feedback più completo ti aiuterà a trovare gli errori più facilmente, quindi “Print full debug”.

After Compiling

Run Bless è un’opzione che non dovrebbe più servirti, ma torna utile se sviluppi con versioni di Internet Explorer pari o inferiori alla nove.

Bless infatti è una modalità che conta il numero di selettori presenti in un singolo file CSS e ti avvisa quando ne scrivi troppi, questo perché Internet Explorer nelle versioni più vecchie dopo un certo numero di selettori smette ignora tutto quello che viene scritto dopo nel file CSS.

Output

Questa opzione permette di dire a CodeKit di ricompilare automaticamente il file CSS generato ad ogni modifica che lui vede al file Sass, permettendoti di avere un compilatore automatico in tempo reale.

To This Path

È il path in cui verrà salvato il file CSS generato. Puoi modificarlo cliccando su “Edit”.

Le funzionalità su altri compilatori, sia per Mac che per Win sono tendenzialmente le stesse, ti basterà dare un’occhiata al software che hai scelto per ritrovarle.

Cominciamo ad analizzare e funzionalità di base di Sass.

Coerenza grafica con Sass

Mettiamo il caso: stai “tagliando” (scusami ma non trovo altro termine più adatto) un template che un grafico ha realizzato per te, probabilmente stai lavorando in un’azienda di sviluppo web dove le figure di grafico e sviluppatore frontend sono ben divise (per fortuna, aggiungerei).

Ti consegnano la grafica in formato psd. Se sei fortunato, cioè se stai lavorando con dei grafici esperti, ti verrà consegnato anche un documento con le linee guide per lo stile, la quale non è nient’altro che una guida che di solito ti consegnano in un file psd o pdf, che contiene tutte le informazioni su:

  • tipografia
    • font-size di ogni elemento (h1, h2, h3, p, liste, ecc..)
    • font-weight di ogni elemento
    • colori del testo
    • colori degli sfondi
  • spazi tra gli elementi
    • padding
    • margin
    • border
  • griglia layout
    • quante colonne compongono il layout
    • larghezza singola colonna
    • margini e padding singola colonna
      ecc..

Ricordi che cosa ho detto prima? Che Sass prende alcuni concetti dei linguaggi di programmazione e li porta nel mondo dei CSS.

Hai presente cosa è una variabile in PHP?

Se lo sai, ti si dovrebbe accendere una lampadina, anzi, un intero lampadario! Perché la risposta è: si, puoi usare le variabili in Sass come in PHP.

Voglio andare più a fondo, facendo un esempio pratico. Io adoro gli esempi pratici, le cose astratte non mi entrano in mente e mi piace fare riferimenti alla vita reale e casi che si verificano realmente mentre programmi.

 

Esempio pratico di utilizzo di Sass

Un grafico mi ha appena passato il nuovo psd da “tagliare” e trasformare in una pagina web per il nuovo progetto che stai realizzando.

Immagina che, insieme ai file .psd ti abbia inviato un documento con le linee guida del progetto, che dice quanto segue (fai finta che sia realistico, non badare ai font, dimensioni, ecc, prendi per buono per un attimo quello che ti dico a puro titolo di esempio):

  • h1
    • font-size: 23px
    • line-hehgith: 30px
    • color: #666666
    • font-weight: 600
  • h2
    • font-size: 20px
    • line-height: 20px
    • color: #f5f5f5
    • font-weight: 400
  • p
    • font-size: 15px
    • line-height: 15px
    • color: #333333
    • font-weight: 400
  • Colore Principale usato: #00ccff

Bene! Ma guarda cosa abbiamo qui: un po’ di normalissimo css per i nostri tag <h1>, <h2>, <p> (come font-size, interlinea), e poi?

Abbiamo un colore principale. Solitamente è un colore che, per la coerenza del design grafico, viene ri-utilizzato spesso e volentieri e dev’essere sempre lo stesso.

Ad esempio, se un sito ha il suo colore principale ben definito, nel nostro caso #00ccff, allora questo colore è probabile che venga riutilizzato più volte. Quindi tu hai scritto i tuoi file css dove questo codice colore viene ripetuto più e più volte.

Ma se per qualche motivo devi cambiare il colore che succede? Si certo, possiamo usare la funzione “find and replace” di che tutti gli editor hanno, ma non è efficiente.

Sass ti permette di inserire questo colore principale in una variabile, e poi, quando devi utilizzare di nuovo lo stesso colore, non scriverai il codice esadecimale, ma il nome della variabile!

Così che cambiando il valore della variabile, questo verrà cambiato in tutti i file in cui essa viene usata.

Facciamo un esempio e passiamo alla pratica. Creiamo i primi file .sass

Inserire le variabili come dati in file Sass

Nella cartella css del tuo tema, crea una sotto-cartella e chiamala “data”, per indicare che li dentro di andranno solamente i file sass che conterranno dati, non regole css, tra poco capirai come funziona.

Con il tuo editor di testo, crea un nuovo file e, come estensione del file, inserisci “.sass”. Il file chiamalo pure “colors.sass”.

Dentro il file colors.sass, inserisci la tua prima variabile, in questo modo:

[css]

$color_main: #00ccff;

[/css]

Il gioco è fatto! Adesso hai un file .sass che io chiamo “di soli dati”.

Creare ed usare partial con Sass

Sei arrivato a scrivere lo stile dell’header del sito. Dovrai creare un altro file. Sempre nella cartella css del tuo tema, allo stesso livello della sotto-cartella “data”, crea una nuova cartella e chiamala “partial”.

Una volta creata la cartella partial, dentro crea il tuo primo file di regole css e chiamalo “header.sass”.

La struttura dovrebbe assomigliare alla seguente:

Dentro il tuo file sass, scriverai lo stile css dell’header e ti capiterà di voler utilizzare le variabili colore che hai scritto prima. Per utilizzare la variabile che abbiamo creato prima nel tuo file CSS, devi procedere così:

Come prima cosa, importa i file sass scrivendo: @import “../data/color.sass”, dirà al compilatore di inserire quelle informazioni qui dentro quando processa il file e genera il css finale, altrimenti riceverai un errore dal compilatore

Dopo che lo hai importato, quando comincerai a scrivere il nome della variabile, il tuo IDE te la dovrebbe suggerire. Ad esempio, se volessi assegnare il colore principale ai titoli <h1> allora dovrai scrivere: 

[css]

h1
$color_main

[/css]

Ed ecco fatto! hai utilizzato la tua prima variabile.

Come si scrive il codice Sass

Avrai notato che non sto utilizzando le parentesi e nemmeno i punti e virgola.

Ebbene, in Sass, scriverli non serve. Infatti Sass è piuttosto intelligente da questo punto di vista e capisce gli annidamenti attraverso l’uso delle indentazioni. Ma come sempre, facciamo un esempio pratico.

Esempio pratico di CSS con Sass

Partendo da questo html:

<div id="content">
    <ul>
       <li>
          Elemento lista 1
       </li>
       <li>
          Elemento lista 2
       </li>
    </ul>
</div>

Per assegnare un padding all’elemento con ID content e per colorare le voci della lista non ordinata, dovresti scrivere:

[css]

#content
padding: 30px
ul
color: red

[/css]

Hai notato che per dire a Sass che devo stilizzare l’ul dentro #content è bastato “inserirlo” al suo interno e indentarlo, creando così la gerarchia.

Il codice CSS generato da Sass sarò quindi il seguente: 

[css]

#content {
padding: 30px;
}

#content ul {
color: red;
}

[/css]

Scommetto che adesso cominci a percepire l’incredibile potenza di Sass e di quanto possa essere più divertente lavorare con questo linguaggio.

Ti assicuro che abbiamo a malapena scalfito la punta dell’iceberg e ne vedrai delle belle.

Complimenti! hai concluso la prima lezione

Clicca sul bottone qui sotto per ottenere la seconda parte della guida a Sass su Magento.