Comment créer plusieurs valeurs de box-shadow dans LESS CSS ?

Question

Lire la suite

Il y a plusieurs réponses "correctes". . Puisque cette question reçoit beaucoup de trafic, je me suis dit que je devais rester au courant de ce qui se passait (je pense) la meilleure réponse est (basé sur la documentation LESS) au fur et à mesure que le projet LESS évolue, et je modifierai ma réponse acceptée en conséquence.

---

J'utilise LESS et je n'ai pas réussi à trouver une solution pour autoriser les ombres multiples des boîtes CSS3. J'ai le mixin suivant :

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

et j'essaie de le faire :

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

Cela fonctionne en CSS3 normal, mais échoue lorsqu'il est exécuté à partir d'un fichier LESS. J'ai lu quelque part que la virgule qui sépare les deux ombres est la cause du problème dans l'analyseur LESS.

Quelqu'un sait-il comment faire pour que cela fonctionne ? La seule solution à laquelle je pense est de créer un fichier CSS supplémentaire contenant mes multiples propriétés box-shadow.

Answer 1

Cela fonctionne avec plus récent Les versions 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 plus vieux Les versions LESS :

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

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

Answer 2

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

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

Answer 3

LESS supprime la virgule. Ainsi, le @arguments devient une valeur :

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

Ce qui est invalide en tant que box-shadow.

Faites plutôt cela 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);

Answer 4

La meilleure solution consiste à créer des surcharges distinctes pour chaque nombre d'ombres. Less gère la résolution correcte de la surcharge :

.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;
}

EDITAR:

Ok, je suis toujours en train d'apprendre sur LESS, mais il semble que le mixin en fait TOUTES des surcharges dans certaines situations, au lieu de celle dont la liste de paramètres est la plus applicable, de sorte que vous pouvez obtenir des résultats différents. 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 paramètres attendus. Je réviserai ma réponse une fois que j'aurai compris ce qui se passe / trouvé une meilleure solution.

Answer 5

.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);
}