A volte la direttiva @extend non è sufficiente a garantire l’automazione di particolari porzioni del nostro foglio di stile, basti pensare a tutti in quei casi nei quali dovremmo replicare la stessa struttura generale con alcune piccole, ma significative, variazioni.
Esprimiamo meglio questo concetto con un esempio, supponiamo di aver disegnato un <button>
come quello seguente:
Nell’esaminare il codice CSS necessario, notiamo come, per ottenere l’effetto desiderato, il colore principale dell’elemento debba essere ripetuto in diverse proprietà: background, outline, box-shadow e lo stesso color in caso il mouse si sovrapponga all’elemento:
.button
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; !
padding: 10px 20px;
display: inline-block;
text-transform: uppercase; !
background: blue;
outline: 1px solid blue;
box-shadow: 0 0 10px blue;
color: white;
border: 1px solid white;
&:hover {
color: blue;
background: white;
box-shadow: none;
}
}
button {
@extend .button;
}
Ora supponiamo di dover produrre per lo stesso progetto una variazione del pulsante precedente dove il colore principale sia il verde. Certo, potremmo utilizzare la direttiva @extend, ma il risultato sarebbe piuttosto confuso e poco elegante considerato il numero di proprietà da alterare:
button.green
{
@extend .button;
background: green;
outline: 1px solid green;
box-shadow: 0 0 10px green;
&:hover{
color: green;
}
}
Casi come questi sono perfetti per essere risolti con l’utilizzo dei @mixin, questa potente direttiva, che sarà il fulcro dell’intera lezione, consente infatti di creare gruppi di selettori e proprietà CSS ripetibili all’interno del nostro fogli di stile su cui possiamo applicare dei parametri arbitrari, proprio come dovessimo invocare una funzione alla quale passare un set di argomenti.
Con questo nuovo strumento nella nostra cassetta degli attrezzi proviamo a riscrivere l’esempio precedente (provalo online):
@mixin baseButton($bgColor)
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 10px 20px;
display: inline-block;
text-transform: uppercase;
background: $bgColor;
outline: 1px solid $bgColor;
box-shadow: 0 0 10px $bgColor;
color: white;
border: 1px solid white;
&:hover {
color: $bgColor;
background: white;
box-shadow: none;
}
}
button.green{
@include baseButton(green);
}
button.red{
@include baseButton(red);
}
Comodo, e decisamente più elegante! $bgColor è una vera e propria variabile, utilizzata all’interno delle singole proprietà e pilotata attraverso l’argomento passato durante l’invocazione al @mixin
.
Nella lezione che segue esamineremo meglio i tipi di variabile in SASS, che ci consentiranno di lavorare in modo ancora più flessibile.
Se vuoi aggiornamenti su CSS inserisci la tua e-mail nel box qui sotto:
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso . Esistono diversi preprocessori CSS tra cui orientarsi, la nostra scelta cade su SASS, che si distingue per completezza, stabilità, estensibilità e integrazione con gli altri componenti tipici di uno stack Web moderno.
L'utilizzo dell'annidamento dei selettori è una pratica comune, e in alcuni casi anche utile. Tuttavia essa presenta vantaggi e svantaggi: ecco quali.