SASS et LESS : mixin pour multiple shadow

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 🙂

Leave a Reply