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 ! :D

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 :)

Be Sociable, Share!

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>