Comment créez-vous plusieurs valeurs box-shadow dans LESS CSS

Lis ça

Il y a plusieurs réponses “correctes” . Étant donné que cette question génère beaucoup de trafic, je me suis dit que je devrais suivre (je pense) la meilleure réponse (basée sur la documentation LESS) à mesure que le projet LESS évolue et modifier ma réponse acceptée en conséquence.


J’utilise LESS et je n’ai pas pu trouver de solution pour autoriser plusieurs ombres de boîtes CSS3. J’ai le mixin suivant:

.box-shadow(@arguments) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } 

et je tente ceci:

 .box-shadow( inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5); ); 

Cela fonctionne dans CSS3 normal, mais échoue lors de l’exécution à partir d’un fichier LESS. J’ai lu quelque part que la virgule séparant les 2 ombres est la cause du problème dans l’parsingur LESS.

Est-ce que quelqu’un sait comment faire ce travail? La seule solution de contournement que je puisse imaginer consiste à créer un fichier CSS supplémentaire contenant mes multiples propriétés box-shadow.

La meilleure solution consiste à effectuer des surcharges distinctes pour chaque nombre d’ombres. Moins gère la résolution de surcharge appropriée:

 .box-shadow(@shadow1) { -webkit-box-shadow: @shadow1; -moz-box-shadow: @shadow1; box-shadow: @shadow1; } .box-shadow(@shadow1, @shadow2) { -webkit-box-shadow: @shadow1, @shadow2; -moz-box-shadow: @shadow1, @shadow2; box-shadow: @shadow1, @shadow2; } .box-shadow(@shadow1, @shadow2, @shadow3) { -webkit-box-shadow: @shadow1, @shadow2, @shadow3; -moz-box-shadow: @shadow1, @shadow2, @shadow3; box-shadow: @shadow1, @shadow2, @shadow3; } .box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) { -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4; -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4; box-shadow: @shadow1, @shadow2, @shadow3, @shadow4; } .box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) { -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5; -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5; box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5; } 

MODIFIER:

Ok, je suis toujours en train d’apprendre sur LESS, mais il semble que cela va effectivement mélanger TOUTES les surcharges dans certaines situations, au lieu de celle avec la liste de parameters la plus applicable, de sorte que vous pouvez obtenir des résultats variables. J’ai depuis révisé mes mixins pour qu’ils soient nommés box-shadow-2 ou box-shadow-3, afin de correspondre au nombre de parameters attendu. Je réviserai ma réponse une fois que j’aurai trouvé ce qui se passe / avoir une meilleure solution.

Cela fonctionne avec les nouvelles versions de LESS:

 .box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8);); // this semicolon is important! ^ 

Et cette version plus moche fonctionne même avec les anciennes versions LESS:

 .box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)"); 

Mise à jour: MOINS a évolué, cette réponse a donc été mise à jour et est maintenant correcte à nouveau. Merci Michał Rybak

Il devrait fonctionner parfaitement. Je l’ai déjà utilisé Essayez avec ce mixin:

 .box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) { -moz-box-shadow: @shadow1, @shadow2; -webkit-box-shadow: @shadow1, @shadow2; box-shadow: @shadow1, @shadow2; } 

Et alors:

 .box-shadow(inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5)); 

MOINS enlève la virgule. Ainsi, la valeur @arguments devient:

 inset 0 0 50px rgba(0,0,0,0.3) 0 0 10px rgba(0,0,0,0.5); 

Qui n’est pas valide comme une ombre de boîte.

Au lieu de cela, faites ceci quand vous voulez une virgule:

 @temp: inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5); .box-shadow(@temp); 
 .box-shadow (@shadow1) { -webkit-box-shadow: @shadow1; -moz-box-shadow: @shadow1; -ms-box-shadow: @shadow1; -o-box-shadow: @shadow1; box-shadow: @shadow1; } .box-shadow (@shadow1, @shadow2) { @temp: @shadow1, @shadow2; .box-shadow(@temp); } .box-shadow (@shadow1, @shadow2, @shadow3) { @temp: @shadow1, @shadow2, @shadow3; .box-shadow(@temp); } 

Cette question est un peu dépassée, car votre solution fonctionne pour le moment.


Cependant, je vais essayer d’expliquer pourquoi, car de nombreuses personnes semblent ne pas être au courant de cela:

Transmettre une liste d’arguments séparés par des virgules à un mixin est assez simple: utilisez simplement le point-virgule ( ; ) au lieu de la virgule dans l’appel mixin.

De la documentation LESS :

Les parameters sont soit séparés par des points-virgules ou des virgules. Il est recommandé d’utiliser le point-virgule. Le symbole virgule a une double signification: il peut être interprété soit comme séparateur de parameters mixin, soit comme séparateur de liste css. L’utilisation de la virgule comme séparateur de mixin rend impossible l’utilisation d’une liste séparée par des virgules comme argument.

Le point-virgule n’a pas une telle limitation. Si le compilateur voit au moins un point-virgule dans un appel ou une déclaration mixin, il suppose que les arguments sont séparés par des points-virgules. Toutes les virgules appartiennent alors à des listes CSS.


La définition de Mixin utilise une syntaxe régulière bien connue:

 .box-shadow(@params) { -webkit-box-shadow: @params; -moz-box-shadow: @params; box-shadow: @params; } 

Mais mixin call devrait utiliser des points-virgules pour séparer les arguments. Si des points-virgules sont utilisés, les virgules ne sont plus traitées comme des séparateurs et sont transmises à mixin sans problème:

 .box-shadow( inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5); ); 

Notez que si (comme dans le cas ci-dessus) une seule liste est passée, vous devez également utiliser le point-virgule à la fin.

Consultez ma réponse concernant les différents arrière-plans pour voir comment les appels mixin doivent ressembler à plusieurs parameters, dont certains sont des listes séparées par des virgules.

Voici une autre solution (que je préfère plus):

Utilisez la fonction de chaîne e() . Ex: e("S1, S2") renverra S1, S2 sans guillemets.

Long exemple:

Définition:

 .c3_box-shadow(@val){ -webkit-box-shadow: @val; -moz-box-shadow: @val; box-shadow: @val; } 

Usage:

 .box-shadow( e("inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2)") ); 

Sortie:

 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2); 

Référence: http://lesscss.org/functions/#ssortingng-functions-e