Introduzione

Nella prima lezione abbiamo introdotto alcuni concetti di Sass, come ad esempio:

• con Sass puoi -più facilmente che con CSS puri- mantenere una coerenza grafica
• lavorando in Sass con poche righe di codice, puoi generare file css di enorme complessità, mantenendo, in Sass, una grande leggibilità
  • tipografia (dimensioni, colori, ecc)
  • grid (puoi creare il tuo “bootstrap” personale facilmente)
  • inserire tutti i “dati” come spessori, bordi, padding, margin, ecc
  • ecc..

In questa seconda parte, voglio entrare un po’ più a fondo su come si implementa Sass in Magento.

Come spiego nella prima parte della Guida a Sass per Magento, dovrai dotarti di uno strumento, detto compilatore, che ti faccia lavorare con Sass su Magento. Completa quello step adesso, perché ti servirà quel software per poter andare avanti.

Come strutturare i files in Sass

L’argomento di oggi riguarda la struttura dei files. Ma, credimi, è molto più divertente di quanto tu stia pensando.

Facciamo un esempio.

Stai “tagliando” il tuo nuovo tema Magento e dentro la cartella skin/frontend hai il tuo package e il tuo tema. Ad esempio, l’albero cartelle potrebbe essere una cosa tipo questa:

/skin
    /frontend
        /nome_package
            /nome_tema

dentro la cartella “nome_tema”, dovrai creare la cartella “css”. Dentro quest’ultima, dovrai creare altre cartelle, per separare tutto nel modo corretto e quello che dovresti ottenere è qualcosa del genere:

/skin
    /frontend
      /nome_package
          /nome_tema
              /css
                 /bundles
                 /partial
                 /data
                 /lib

A cosa serve questa struttura? E che cosa ci va dentro data e dentro lib?

In Sass, come dicevamo nella precedente lezione, c’è il concetto di variabile. Puoi assegnare un valore ad una chiave (ricordi l’esempio del colore principale del sito? bene, quello).

La cartella Partial

Nella cartella “partial”, semplicemente ci saranno i vari “pezzi” di codice sass che identifica le varie aree del sito. Un esempio realistico potrebbe essere:

/skin
    /frontend
        /nome_package
           /nome_tema
              /css
                 /bundles
                 /partial
                    header.sass
                    footer.sass
                    slider.sass
                    cta.sass
                 /data
                 /lib

Questo è solo un esempio, ma è realistico. Analizziamo i file uno per uno:

• header.sass e footer.sass saranno i file che conterranno tutte le regole css per dare uno stile all’header e al footer
• slider.sass potrebbe essere un file sass che definisce le regole css per uno slider che hai deciso di implementare e li dentro metterai tutte le regole
• mentre invece “cta.sass” sarà il file che stilizzerà tutte le call to action

Forse questo esempio è un po’ estremo, sta a te trovare il livello ottimale in cui dividere i file. Più dissezioni i files (quindi meno hai file giganteschi con tutto scritto dentro) più sarà possibile ottimizzare le performance. Scendiamo ancora più in profondità e cominciamo a fare qualche esempio di codice Sass.

Header

Voglio realizzare un header molto semplice e questo è il codice HTML:

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

Ora, immagina di voler fare queste operazioni sull’html:

• l’header deve avere una larghezza fissa ed essere centrato
• l’header_container deve avere un colore di sfondo
• le voci di menu sono colorate di nero
• i link dentro gli elementi <li> devono essere rossi
• le voci devono disporsi in orizzontale

Il codice dentro header.sass, sarà quindi qualcosa simile a questo:

[css]

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

[/css]

Come puoi notare, in Sass è importante l’indentazione corretta del codice.

Quando vai a capo e indenti un selettore sotto un altro, saranno parenti, uno sarà figlio dell’altro. Nel nostro caso, #header è figlio di #header_container.

Questa cosa è fondamentale, ed è importantissimo che impari ad indentare correttamente il testo. Se sbagli, il codice generato sarà errato.

Un consiglio prima di chiudere la seconda parte della guida: fai delle prove con CodeKit, scrivendo poche regole Sass e generando il file css, in modo da poter controllare che cosa Sass genera e prova a giocare con le indentazioni, così da vedere i diversi effetti prodotti da Sass, questo è un ottimo modo per iniziare e prendere confidenza con le indentazioni.

Per oggi è tutto, stiamo iniziando a vedere un po’ come si scrive il codice. Nella prossima lezione, vedremo di andare a riempire:

• file data
• file lib (e ti spiego a cosa serve)
• alcune delle funzioni più belle di Sass