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

I fondamenti di Sass dalla A alla Z

Metti i muscoli al tuo codice CSS

e inizia a sviluppare progetti che spaccano!

Introduzione

Ti do il benvenuto nella terza parte di questa guida dedicata a Sass che, come avrai visto, comincia dalle basi e, cercando di spiegartelo in modo semplice e diretto, ti insegna non solo Sass, ma anche come integrarlo dentro Magento.

Nella precedente lezione ti ho mostrato come io creo la mia struttura di cartelle per tenere ordinata la libreria di file sass per il mio tema.

Abbiamo visto che i files vengono divisi per area del sito (ad esempio: header.sass, footer.sass) e che possiamo “fare a fettine” il nostro codice css, separandolo in vari pezzi più piccoli.

Oggi, come anticipavo nella parte 2, andremo a vedere a che cosa servono i file dentro la cartella /lib e /data (e sono sicuro che ti piacerà un sacco questa cosa, se sei un frontend developer con un po’ di mentalità da ingegnere, anche senza essere laureato in ingegneria!).

Come ragiona Sass

Devi sapere che quando ho scoperto questo particolare aspetto della tecnologia Sass non ne ho subito capito le potenzialità. Provando, nel tempo, ho capito che potevo spingere questo strumento oltre il metodo old-style (CSS puri) semplicemente scrivendo i CSS in modo un po’ diverso e con un nuovo linguaggio,

I file Sass, se correttamente collegati, “parlano” tra di loro. Ma riprendiamo l’esempio dell’header semplice che abbiamo costruito ieri, riporto per comodità il codice:

[css]

#header_container
    background-color: #ccc
    #header
       width: 900px
       margin: 0 auto
       ul
          li
             display: inline
             color: #000
             a
                color: red

[/css]

E se tu avessi un colore principale che identifica il tuo sito e volessi assegnare questo colore a vari elementi?

Se il tuo colore principale è, ad esempio, il rosso, allora andremo a mettere questo colore in una variabile. Questa variabile, per tenere tutto ordinato e preciso va messa dentro la cartella /data/ nel file “colors.sass” (sono sicuro che gli psicologi alla lettura potrebbero parlare per ore del perché organizzo in modo così preciso le cartelle, ma lasciamo stare :-p).

Dentro Data, quindi:

/skin
    /frontend
        /nome_package
            /nome_tema
                /css
                    /bundles/
                    /partial/
                    /data/
                        colors.sass
                    /lib/

andrai a creare il file colors.sass.

Le variabili si scrivono con il simbolo di dollaro + il nome della variabile, quindi il file si presenta così:

[css] $color_main: red [/css]

Semplice e indolore, no? Abbiamo assegnato il valore. Adesso, Sass deve “accorgersi” che esiste questo file di dati.

Dentro il nostro file header.sass, alla prima riga, importi il file sass (specificando correttamente il path del file), nel mio caso è:

[css] @import "../data/colors.sass" [/css]

Adesso, il tuo file header.sass diventerà così:

[css]

#header_container
    background-color: #ccc
    #header
       width: 900px
       margin: 0 auto
       ul
          li
             display: inline
             color: #000
             a
                color: $color_main

[/css]

Nota: non so quale editor (o sarebbe meglio dire: IDE) utilizzi per scrivere codice php/javascript/css/html ma io ti consiglio PhpStorm.

Non voglio entrare in “guerre di religione” su quale IDE sia meglio, ce ne sono tanti, molti sono validi -Netbeans ad esempio, per citare il primo che mi viene in mente- ma Phpstorm funziona piuttosto bene.

Non mi pagano per dirlo, ma lo dico perché spero di dare un valore a te che leggi, perché se mi sono trovato bene io, magari può far piacere anche a te utilizzarlo. Chiusa piccola parentesi sull’IDE.

Tra l’altro, il tuo IDE, se supporta un minimo Sass, dovrebbe averti suggerito il nome della variabile non appena hai iniziato a scrivere “$col”.

Questa cosa è davvero utile, ed è il motivo per cui divido il tutto in files e le variabili per nome. Così, quando avrai 5, 10 o 20 colori settati nel tuo file colors.sass, non appena inizierai a digitare “$colors” avrai tutta la lista dei colori che hai definito, rendendoti semplice la scelta del colore che stai cercando.

Capisci bene che così facendo, eviterai quella brutta tendenza che hanno quasi tutti i designer che ho visto scrivere codice CSS:

“misteriosamente” i colori cambiano tra una regola e l’altra -che poi tanto misteriosa come cosa non è, perché si tende a sbagliare.

Le variabili evitano tutto questo, perché dovrai scriverle una volta sola.

Esiste anche un altro effetto collaterale, forse poco rilevante perché improbabile possa servirti, ma c’è: se improvvisamente do di matto e decido di cambiare i colori del mio sito (ad esempio quello principale, perché magari c’è un re-design), allora mi basterebbe cambiare il valore della variabile “$main_color” ed automaticamente comparirà il nuovo colore dappertutto.

Fico, no? Se poi invece di colori, la cosa succede per qualche altro tipo di variabile, si che diventa davvero utile. Anzi, adesso che ci penso, vedo almeno un caso pratico che può succedere e può tornarti utile sapere e, allo stesso tempo, ti faccio vedere qualche altra funziona carina di Sass.

Agganciare gli elementi tra di loro per renderli dinamici

Lo so, il titolo è un po’ strano e astratto, ma adesso ti mostro un esempio reale così ci capiamo subito.

Non è raro vedere un header che mostra un menu e, questo menu, spesso ha delle sotto-liste di elementi.

Ad esempio, se volessi rendere tale il nostro header, diventerebbe qualcosa del genere:

<div id="header_container">
    <div id="header">
        <ul id="main_nav" class="level1">
           <li class="level1">
              <a href="http://iltuourl.com">Voce 1</a>
              <ul class="level2">
                 <li class="level2">
                    <a href="http://iltuourl.com">Voce 1</a>
                 </li>
                 <li class="level2">
                    <a href="http://iltuourl.com">Voce 2</a>
                 </li>
              </ul>
         </li>
           <li class="level1">
              <a href="http://iltuourl.com">Voce 2</a>
          </li>
           <li class="level1">
              <a href="http://iltuourl.com">Voce 3</a>
           </li>
        </ul>
     </div>
</div>

Niente di trascendentale, ho aggiunto solo una classe “level1” agli elementi di primo livello e una classe “level2” a quelli di secondo livello.

Se conosci Magento, sai che la struttura dei suoi menu è proprio questa e quindi ti sarà familiare.

Dovresti già saperlo, ma lo dico per completezza: l’elemento <ul> con classe “level2” nel css parte, al caricamento della pagina, con un bel “display: none” e viene attivato/visualizzato solo tramite l’interazione hover sull’elemento padre (css o javascript che sia).

Mettiamo anche il caso che questo elemento figlio debba essere posizionato in absolute dall’alto.

Quindi, il nostro CSS senza l’uso di variabili, sarebbe:

[css]

#header_container
    background-color: #ccc
    #header
       width: 900px
       margin: 0 auto
       height: 30px
       ul
          position: absolute
          top: 30px
          li
             display: inline
             color: #000
             a
                color: $color_main

[/css]

Quale è il modo giusto di scriverlo, per agganciare la regola “top” dell’elemento <ul> all’altezza dell’header, in modo che se cambio uno, anche l’altro ne subisce l’effetto?

Semplice! inserendolo in una variabile.

Quindi, andiamo a creare un nuovo file nella cartella data:

/skin
    /frontend
        /nome_package
           /nome_tema
              /css
                 /bundles/
                 /partial/
                /data/
                    colors.sass
                    measures.sass
                 /lib/

e dentro, il codice Sass diventerà:

[css]

$h_header: 30px

[/css]

e, di conseguenza, il codice Sass dell’header diventerà:

[css]

#header_container
    background-color: #ccc
    #header
       width: 900px
       margin: 0 auto
       height: $h_header
       ul
          position: absolute
          top: $h_header
          li
             display: inline
             color: #000
             a
                color: $color_main

[/css]

Quindi, comincia ad utilizzare i file data e inserisci tutte le informazioni che ti servono, questo ti aiuterà a strutturare bene i dati e ad “agganciare” gli elementi tra di loro.

Complimenti! hai concluso la terza lezione

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