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

I fondamenti di Sass dalla A alla Z

Metti i muscoli al tuo codice CSS

e inizia a sviluppare progetti che spaccano!

Nell’ultima lezione, la numero 3, abbiamo visto l’utilità delle variabili con l’esempio pratico dell’header e, nel caso specifico, su come si possano impostare le misure (l’esempio, se ricordi, era sull’altezza dell’header) e come questo permetta di “agganciare” tra di loro i vari elementi, in modo che uno influisca sull’altro a cascata.

In questa quarta parte, parliamo dei Mixins.

Introduzione ai Mixins di Sass

Che cosa sono i mixins? Adesso comincia ad arrivare il bello!

Facciamo subito un esempio.

Se io volessi, con i soli CSS, applicare uno stesso stile a più elementi HTML, cosa dovrei fare?

Semplice, dovrei creare una classe e assegnarla agli elementi HTML, quindi intervenire nell’HTML, modificandolo. Oppure dovrei copia-incollare quello stesso codice CSS in altri selettori.

Ma se volessi applicare uno stile ben definito, che io riutilizzo, ad altri elementi html senza però toccare l’HTML e senza copiare codice già scritto?

Ci vengono in aiuto i Mixins.

I mixins non sono altro che codice che posso riutilizzare, con il grande vantaggio di poter passare dei parametri.

Se volessimo fare un paragone, sono, diciamo simili alle funzioni di PHP.

Ad esempio, io nei miei progetti riutilizzo spesso il codice per creare dei bordi arrotondati, ma questo vale per mille altri esempi, box-shadow, per citarne uno.

Se dovessi farlo con solo il CSS dovrei, ogni volta, scrivere le regole css per tutti i browser, come ad esempio:

[css]

.selettore_1 {
-webkit-border-radius: 10px
-moz-border-radius: 10px
-ms-border-radius: 10px
border-radius: 10px
}

[/css]

se volessi applicare la direttiva border-radius ad un altro selettore, scriverei:

[css]

.selettore_2 {
-webkit-border-radius: 10px
-moz-border-radius: 10px
-ms-border-radius: 10px
border-radius: 10px
}

[/css]

e così via. Ma che succede se usiamo Sass?

Sta a vedere:

Creo il mixin e lo dichiaro dentro il mio file (chiamalo come vuoi) dentro la cartella lib, così:

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

Poi, dentro il file, dichiaro il mixin:

[css]

=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius

[/css]

Infine, nel mio file css, ad esempio dentro l’header, lo userò così (nel caso in cui volessi usarlo su due selettori diversi):

[css]

#header_container
    background-color: #ccc
    +border-radius(25px)
    #header
       width: 900px
       margin: 0 auto
       height: $h_header
       ul
          position: absolute
          top: $h_header
          +border-radius(10px)
             li
                display: inline
                color: #000
                a
                   color: $color_main

[/css]

Comincia a diventare interessante, vero?

E dovresti anche aver notato che, rispetto ad un normalissimo file CSS, il livello di “ingegneria” del software, siamo avanti anni luce. Tra data, lib e Sass per lo stile, c’è veramente da divertirsi.

Puoi anche passare dei parametri predefiniti -esattamente come per una funziona- quando dichiari il mixin.

Ad esempio, io per il mio piccolo framework frontend che ho creato, ho dichiarato un mixin che centra gli elementi.

Eccolo:

[css]

=centered($float: none !important, $margin: auto)
    margin-right: $margin
    margin-left: $margin
    float: $float

[/css]

Quindi, in questo caso, i margini saranno settati automaticamente su “auto” se io non passo nessun parametro al Mixin quando lo richiamo. E il float è stato aggiunto per sicurezza: se da qualche altra parte nel file Sass/Css l’elemento ereditava un float, con questo parametro lo rendo non flottante, in modo che l’elemento si centri perfettamente.

Infatti, ogni volta che voglio richiamare il mixin e usarlo su un selettore, dirò:

[css]

#selettore
    +centered

[/css]

E in questo caso, posso anche dichiararlo senza parentesi, perché non passo nessun parametro e ho dettato i parametri di default.

Beh, la quarta lezione è un po’ più corta delle altre, ma penso che potrai comunque iniziare a sbizzarrirti davvero tanto con i mixin, creando i tuoi personali da aggiungere alla tua libreria.

Complimenti! hai concluso la quarta lezione

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