Gli ambiti in cui i @mixin si dimostrano utili sono moltissimi, ad esempio possiamo creare un interessante effetto :hover nel quale una immagine si ingrandisce lasciando però allo sviluppatore la possibilità di selezionare il fattore di ingrandimento e le coordinate da mantenere centrate durante l'effetto di zoom (provalo online):
@mixin zoomIn($imageUrl, $zoomOrigin, $zoomFactor) {
position: relative;
overflow: hidden;
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: transparent url($imageUrl) no-repeat 50% 50%;
background-size: 100%;
transform-origin: $zoomOrigin;
transition: transform 0.5s;
}
&:hover:after{
transform: scale($zoomFactor);
}
}
div {
height: 480px;
width: 640px;
@include zoomIn(
'http://sandropaganotti.com/wp-content/goodies/misc/cornovaglia.png',
90% 50%,
1.8
);
}Esploriamo un'altra opportunità offerta da questa direttiva, la possibilità di insistere non soltanto sui valori delle singole proprietà ma anche sulla stessa composizione dei selettori, vediamo un esempio (provalo online):
@mixin toolTip($fileExt, $attr: "title") {
a[href$="#{$fileExt}"] {
display: inline-block;
position: relative;
&:after{
color: black;
position: absolute;
z-index: 2;
left: 100%;
top: 0;
background: white;
box-shadow: 0 0 10px black;
padding: 5px;
white-space: nowrap;
content: attr(unquote($attr));
display: none;
}
&:hover:after{
display: block;
}
}
}
@include toolTip('pdf');
@include toolTip('html','data-excerpt');Il @mixin che abbiamo appena scritto genera un selettore capace di intercettare soltanto quegli elementi <a> la cui proprietà href termina con il suffisso definito dall'argomento $fileExt; a questi elementi viene applicato un particolare comportamento capace di mostrare al mouse over un piccolo tooltip contenente il testo proveniente dall'attributo dell'elemento specificato dall'argomento $attr.
Quindi applicando questo foglio di stile ad una porzione HTML come la seguente:
<a href="somefile.pdf" title="XYZ Manual">
Manual
</a>
<a href="nextpage.html" data-excerpt="Nella prossima pagina tratteremo in dettaglio del
fenomeno">
More details
</a>I due @include fanno sì che il tooltip mostri, nel caso del link con estensione .pdf il contenuto dell'attributo title, mentre nel caso del link con estensione .html quello dell'attributo dataexcerpt.
Questo esempio ha introdotto anche alcune nuove caratteristiche della sintassi SCSS, che potranno esserci sicuramente utili con il proseguire delle lezioni:
- possiamo assegnare un valore di default ad un argomento di un @mixin (e, scopriremo, anche di una funzione) utilizzando la sintassi
$variabile: valore - possiamo interpolare una variabile all'interno di una qualsiasi porzione del CSS (selettori, nomi di proprietà, ecc..) usando la sintassi
#{$variabile} - abbiamo già visto nell'esempio precedente come possiamo utilizzare una variabile come valore di una proprietà CSS: nel caso il tipo della variabile in questione sia "stringa" SCSS provvederà automaticamente ad aggiungere gli apici ma, come in questo esempio, potrebbero esserci situazioni in cui questo comportamento si riveli dannoso. La funzione unquote serve proprio per far sì che una stringa venga stampata senza apici.
Ma non abbiamo ancora finito di esplorare le potenzialità di questa direttiva! Nel prossimo esempio vedremo come utilizzare un @mixin per arricchire o modificare un set di selettori e proprietà arbitrariamente inserite dallo sviluppatore grazie alla keyword @content.
Negli ultimi anni la necessità di sviluppare anche per device dotati di supporto touch ha introdotto alcune problematiche extra nell'utilizzo dello pseudoselettore :hover; molti smartphone infatti riconoscono se l'elemento appena tappato ha un :hover associato e, in tal caso, rispondono al tap attivando il selettore :hover e ritardando l'azione legata al click al secondo tap.
Questo comportamento risulta, nella maggior parte dei casi, molto scomodo per l'utente finale e tipicamente viene aggirato in fase di sviluppo utilizzando la classe .no-touch offerta da Modernizr per limitare il comportamento dell':hover ai soli device senza il supporto touch-screen mantenendo però lo stesso comportamento sullo pseudoselettore :active.
Con SCSS possiamo implementare questo comportamento in poche e semplici righe di codice
(provalo online , utilizzando i Chrome Developer Tools per simulare il supporto touch da desktop).
@mixin hoverDeviceWise() {
.no-touch &:hover, &:active {
@content
}
}
a {
text-decoration: none;
@include hoverDeviceWise{
text-decoration: underline;
}
}Concludiamo questa parte della guida con un ultimo interessante esempio, costruiamo un @mixin capace di creare l'effetto 'angolo della pagina piegato' spesso utilizzato nello sviluppo di pagine web.
Per ottenere un effetto simile possiamo utilizzare sapientemente i due pseudoselettori :before e :after traendo vantaggio dalla possibilità di parametrizzare il @mixin in modo da decidere colore di sfondo e dimensione della piega durante ogni singola implementazione ( provalo online):
@mixin with-curl($color, $eardog) {
margin-right: $eardog;
display: block;
position: relative;
background: $color; !
&:after,&:before {
display: block;
content: '';
position: absolute;
left: 100%;
}
&:after {
bottom: 0;
border-bottom: $eardog solid transparent;
border-left: $eardog solid lighten($color, 20%);
}
&:before {
top: 0;
bottom: $eardog;
width: $eardog;
background: $color;
}
}
div {
@include with-curl(#666, 30px);
height: 100px;
width: 100px;
padding: 10px;
}
Se sperimentiamo un po' con quest'ultimo esempio noteremo con sorpresa come il colore della piega si mantenga sempre coerente con quello scelto in fase di invocazione del @mixin, anche se di poco più chiaro. Responsabile di questo interessantissimo (e utile!) effetto è lighten, una delle funzioni per la manipolazione del colore che approfondiremo nel corso delle prossime lezioni.
Il @mixin è fondamentale in SASS ...ma attenzione!
Non dovrebbero servire altri elementi a riprova della potenza dei @mixin, vero cardine alla base di SASS; spendiamo quindi queste poche righe al termine della lezione per evidenziare il più grosso rischio correlato all'uso di questa direttiva: l'aumento spropositato della dimensione del file CSS risultante.
Ogni volta che questa direttiva viene invocata infatti il suo contenuto viene elaborato ed accodato all'interno del selettore invocante, se quindi abbiamo sviluppato un @mixin di 10 righe alla sua decima invocazione avremo già ipotecato già 100 righe del file CSS risultante.
Detto questo il problema può essere ovviamente controllato prestando attenzione al tipo di @mixin sviluppati ed al loro utilizzo all'interno del file CSS in modo da trarne il massimo vantaggio.