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

I fondamenti di Sass dalla A alla Z

Metti i muscoli al tuo codice CSS

e inizia a sviluppare progetti che spaccano!

Introduzione

Nella precedente lezione abbiamo visto:

  • come facciamo ad evitare il classico utilizzo delle classi css, che ti costringe a modificare l’html, utilizzando invece i Mixins
  • come si fa a creare un Mixin
  • un esempio pratico (la regola border-radius) dove hai potuto verificare con mano che il css “old-style” diventa inutile, ovvero stare a riscrivere tutte le pseudo-regole per i vari browser con i prefissi -moz-, -webkit-, ecc
  • come creare un Mixin che lavori semplicemente richiamandolo nel nostro file Sass e come crearne uno al quale poter passare delle variabili, con dei valori di default

Un caso pratico utile: le animazioni

Vorrei parlarti, sempre nel contesto dei Mixins, di un particolare Mixin che ho creato e che mi permette di gestire senza problemi quasi tutte le animazioni CSS3 che inserisco nei miei siti.

Sempre più spesso la parte di animazione non si limita più al cambio di colore testo o colore sfondo di un elemento, per segnalare che su quell’elemento c’è un’operazione da compiere, per esempio il caso classico è il bottone, la Call To Action, che all’hover del mouse cambia colore di sfondo e colore del testo, ad esempio, facendo capire bene all’utente che c’è un’azione da compiere: il click.

Il supporto sempre migliore ai CSS3 ha permesso, ai designer e frontend developer, di utilizzare le animazioni per migliorare l’interazione.

Quindi, spesso, non si vede più un bottone che “semplicemente” cambia colore testo/sfondo con uno “scatto”, ma sempre più spesso vediamo che questa operazione avviene tramite una transizione più omogenea e armoniosa.

Nel CSS standard, questa transizione avviene tramite la proprietà CSS3 transition.

Ad esempio, immagina di avere questo codice CSS:

[css]

#link {
    color: white;
    background-color: black;
}

#link:hover {
    color: black;
    background-color: white;
}

[/css]

Niente di particolare, un link che ha ID “link” in questo caso, che da testo bianco e sfondo nero, all’hover diventa testo nero e sfondo bianco.

Ora, se tu applicassi questa regola così com’è, non ci sarebbe la transizione tra uno stato e l’altro, avverrebbe uno “scatto” da bianco a nero per il colore del testo e viceversa per lo sfondo.

Quindi, sempre nel contesto di CSS, dovremmo inserire una transition e, il codice, sarebbe qualcosa di simile a questo:

[css]

#link {
    color: white;
    background-color: black;
}

#link:hover {
    color: black;
    background-color: white;
    -webkit-transition: all, 0.2s, ease-in-out
    -moz-transition: all, 0.2s, ease-in-out
    -o-transition: all, 0.2s, ease-in-out
    -ms-transition: all, 0.2s, ease-in-out
    transition: all, 0.2s, ease-in-out
}

[/css]

In questo modo, come vedi, stiamo utilizzando la proprietà transition con tutti i vari prefissi per i diversi browser, passando anche i 3 parametri, tra cui velocità dell’animazione e tipologia di transizione, secondo e terzo parametro.

Ma cosa accadrebbe se facessimo un Mixin generico che puoi utilizzare per tutte le transizioni del tuo sito?

Ti mostro che cosa ho fatto su uno dei miei ultimi progetti, ecco il codice Sass:

[css]

=transition($duration, $animation, $transprop: all)
-webkit-transition: $transprop, $duration, $animation
-moz-transition: $transprop, $duration, $animation
-o-transition: $transprop, $duration, $animation
-ms-transition: $transprop, $duration, $animation
transition: $transprop, $duration, $animation

[/css]

Con questo Mixin, riesci a gestire quasi tutti i casi di transition che ti possono capitare, ed è un buon punto di partenza per iniziare ad utilizzare questa proprietà.

Facciamo un altro esempio pratico: column-count

Conosci column-count?

È una simpatica regola css per dividere il contenuto di un contenitore -ad esempio un DIV-, senza utilizzare la classica struttura a colonne inserite nell’HTML.

Esempio di divisione in colonne (old-style)

Mettiamo il caso che tu abbia 4 blocchi da dividere in altrettante colonne, il tuo HTML sarebbe qualcosa simile a questo:

<div id="container">
    <div id="column_1" class="column3-12">
        … contenuto ...
     </div>
     <div id="column_2" class="column3-12">
        … contenuto ...
     </div>
     <div id="column_3" class="column3-12">
        … contenuto ...
     </div>
     <div id="column_4" class="column3-12">
        … contenuto ...
     </div>
</div>

Abbiamo quindi la classe column3-12 che identifica la larghezza, faccio riferimento ai classici sistemi di grid in stile bootstrap, per capirci, e gli ID che identificano il singolo elemento.

Ma se io non avessi una struttura del genere, come faccio a dividere in colonne?

Appunto, ci viene in aiuto la proprietà column-count di CSS3.

Immaginiamo di avere un HTML simile a questo:

<div id="container">
    <p> … contenuto 1 ...</p>
     <p> … contenuto 1 ...</p>
     <p> … contenuto 1 ...</p>
     <p> … contenuto 1 ...</p>
     <p> … contenuto 1 ...</p>
</div>

Nota che ci sono 5 elementi! Come faccio a dividerlo, per esempio, in 4 colonne?

Con CSS3 standard puoi fare così:

[css]

#container {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}

[/css]

quindi, ottimizzato con Sass, diventa un Mixin:

[css]

=column-count($count, $gap)
    -webkit-column-count: $count
    -moz-column-count: $count
    column-count: $count
    -webkit-column-gap: $gap
    -moz-column-gap: $gap
    column-gap: $gap

[/css]

Semplice, vero?

Da questo momento, come “ragiona” Sass e come funzionano i Mixin dovrebbe esserti chiaro, quindi puoi creare tutti i Mixin che vuoi -oppure cercarne in rete, ce ne sono molti- e ampliare la tua libreria di Mixin.

Per il momento, la Guida Sass finisce qui con questa quinta ed ultima parte, ma puoi discuterne nel nostro gruppo pubblico Facebook, cliccando sul bottone qui sotto per iscriverti.

Complimenti! hai concluso la quinta ed ultima lezione

Clicca sul bottone qui sotto per parlarne sul gruppo Facebook.