J’ai posté une astuce il y a peu pour rendre mon mixin SASS box-shadow compatible avec plusieurs shadows dans la même déclaration. Je me suis retrouvé avec un truc assez moche et surtout très redondant.
Sans plus attendre…
Mixin multiple box-shadow v2
@mixin box-shadow($params) {
-webkit-box-shadow : #{$params};
-moz-box-shadow : #{$params};
box-shadow : #{$params};
}
Voilà comment ça s’utilise :
@include box-shadow( "0 0 5px #333 , inset 0 0 2px #666" );
Et c’est tout ! 😀
En fait le principe est de passer une STRING en paramètre (donc concrètement tout ce que vous voulez) puis dans le code du mixin on se sert des #{ } pour échapper les guillemets.
Bon c’est très bien tout ça mais du coup on est OBLIGÉ d’avoir les ” ” même si on veut qu’une seule shadow. Ok bon d’accord, c’est pas cher payé si y on regarde bien. Mais, … on pourrait s’en débarasser finalement.
Allez, mixin multiple box-shadow v3 !
@mixin box-shadow($params) {
-webkit-box-shadow : $params;
-moz-box-shadow : $params;
box-shadow : $params;
}
Bah ! On est revenu au démarrage en fait là… C’est le mixin box-shadow qu’on trouve partout sur internet. Et on est au courant qu’il est pas capable de supporter les multiple shadows. Comprends pas là… où tu veux en venir coco ?
Eh bah j’y viens justement ! On pourrait juste passer les paramètres EN MÊME TEMPS qu’on les échappe, ça donnerait ça :
@include box-shadow( #{ 0 0 5px #333 , inset 0 0 2px #666 } );
Si pas ginial ça ? On échappe directement au moment de lui passer les paramètres. Le plus beau c’est que si on veut plusieurs shadows il suffit de les mettre dans les #{} pour échapper les virgules et si on veut qu’une seule shadow eh bien on fait comme avant, sans les #{}. Just perfect what.
La même chose en LESS
On peut lui appliquer exactement le même principe. Voici le même mixin en version LESS :
.box-shadow(@params) {
-webkit-box-shadow : @params;
-moz-box-shadow : @params;
box-shadow : @params;
}
La syntaxe est un chouilla différente, pour y passer plusieurs shadows on échappe comme ceci :
.box-shadow( ~" 0 0 10px #444, inset 0 0 5px #444 " );
Exactement le même principe 🙂
