Mon mixin box-shadow me rend bien des services, il permet d’écrire :
UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.
@include box-shadow(0px 0px 5px #666);
Qui est ensuite compilé en ça :
-webkit-box-shadow: 0px 0px 5px #666;
-moz-box-shadow: 0px 0px 5px #666;
box-shadow: 0px 0px 5px #666;
Le code SCSS de mon mixin en question :
@mixin box-shadow($params) {
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}
Malheureusement il ne marche pas si on essaye de lui passer plusieurs shadows pour la même déclaration. Un truc comme ça quoi :
box-shadow: 0px 0px 10px #666,
0px 0px 15px #666,
0px 0px 20px #666,
etc...
Pas moyen d’y arriver avec mon mixin tel quel…
Donc après quelques recherches du côté de Compass puis du côté de StackOverflow je l’ai modifié pour lui permettre de supporter plusieurs shadows dans la même déclaration (9 shadows maximum pour être plus exacte, on va dire que ça suffira hein) 😛
Et voilà, mon petit mixin tout mignon du début s’est transformé en cette chose énorme, immonde et illisible :
@mixin box-shadow( $shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false, $shadow6:false, $shadow7:false, $shadow8:false, $shadow9:false ) {
$params: $shadow1;
@if $shadow2 { $params: $shadow1, $shadow2; }
@if $shadow3 != false { $params: $shadow1, $shadow2, $shadow3; }
@if $shadow4 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
@if $shadow5 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
@if $shadow6 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6; }
@if $shadow7 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7}
@if $shadow8 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8 }
@if $shadow9 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8, $shadow9 }
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}
Et ça s’utilise comme ça :
@include box-shadow( 0px 0px 5px blue, 0px 0px 5px lightBlue, etc. );
Donc 9 shadows max. Mais on peut toujours paramétrer le mixin pour qu’il en accepte plus.
Je vais quand même chercher un moyen de simplifier tout ça, peut-être avec @each je sais pas mais ça vaudrait le coup. Enfin bon au moins maintenant il supporte le multiple shadows ! 😀
UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.
C’est bon ça.
Tu ne peux pas remplacer
@if $shadow3 != false
par
@if $shadow3
?
Si t’as raison ça marche aussi 🙂 Allez déjà 63 bytes en moins !
J’ai trouvé un bien meilleur moyen ! En fait l’idée c’est de passer les différentes box shadow en temps que STRING et de les échapper (dans le code du mixin) pour éviter que ça plante à cause de la virgule.
@mixin box-shadow($params) { -webkit-box-shadow : #{$params}; -moz-box-shadow : #{$params}; box-shadow : #{$params}; }Marche super bien 😀 Plus besoin de l’énorme if et plus de limite de box-shadow double( 😀 )
Vieux topic, mais au cas où quelqu’un tombe sur ce même problème…
@mixin box-shadow($params...) { -webkit-box-shadow: $params; -moz-box-shadow: $params; box-shadow: $params; }Il suffit de rajouter ‘…’ pour passer plusieurs paramètres.
Oui mais si on échappe les paramètres, on ne peut plus passer de variables, ce qui est bien pratique pour gérer les couleurs… Je vais donc rester sur la manière de faire de l’article. Merci en tout cas !!!