Guida a Sass in Italiano con approfondimento per Magento - Parte 2
I fondamenti di Sass dalla A alla ZMetti i muscoli al tuo codice CSS
e inizia a sviluppare progetti che spaccano!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
Menu Guida Sass
Complimenti! hai concluso la seconda lezione
Clicca sul bottone qui sotto per ottenere la terza parte della guida a Sass su Magento.
Trackback/Pingback