web-dev-qa-db-fra.com

Comment créer plusieurs valeurs d'ombre-cadre 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 rester au courant de ce que (je pense) la meilleure réponse est (d'après la documentation LESS) à mesure que le projet LESS mûrit et modifier ma répondez en conséquence.

J'utilise MOINS et je n'ai pas trouvé de solution permettant d'autoriser plusieurs ombres-boîtes CSS3. J'ai le mixin suivant:

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

et j'essaye ceci:

.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 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'analyseur LESS.

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

cssless
40
Mike McLin

La meilleure solution consiste à créer des surcharges distinctes pour chaque nombre d'ombres. Less 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, j'apprends toujours à propos de LESS, mais il semble que certaines surcharges seront mélangéesTOUTESdans certaines situations, au lieu de celle avec la liste de paramètres la plus applicable, afin d'obtenir des résultats variables. Depuis, j'ai révisé mes mixins pour qu'ils s'appellent box-shadow-2 ou box-shadow-3, afin de correspondre au nombre de paramètres attendu. Je réviserai ma réponse une fois que j'aurai compris ce qui se passait/que j'ai une meilleure solution.

6
Wolverine

Cela fonctionne avec les versions newer 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 laide 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 évolué, cette réponse a donc été mise à jour et est à nouveau correcte. Merci Michał Rybak

73
iamnotsam

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));
12
elclanrs

MOINS dépouille la virgule. Donc, la valeur @arguments devient:

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

Ce qui est invalide comme une boîte-ombre.

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);
7
Camilo Martin
.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);
}
4
胡忠晞

Cette question est un peu obsolète, pour le moment votre solution fonctionne réellement.

Cependant, je vais essayer d’expliquer pourquoi, car beaucoup de gens ne semblent pas en être conscients:

En fait, passer une liste d’arguments séparés par des virgules à un mixin est assez simple: il suffit d’utiliser un point-virgule (;) au lieu de virgule dans l’appel mixin.

De MOINS documentation :

Les paramètres sont séparés par un point-virgule ou par une virgule. Il est recommandé d'utiliser le point-virgule. La virgule de symbole a une double signification: elle peut être interprétée soit comme un séparateur de paramètres de mixage, soit comme un séparateur de liste css. L'utilisation de virgules en tant que séparateur rend impossible l'utilisation d'une liste séparée par des virgules en tant qu'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 classique 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 passées au mixin sans problèmes:

.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), seule la liste one list est transmise, vous devez également utiliser le point-virgule à la fin.

Consultez ma réponse concernant plusieurs arrière-plans pour voir à quoi devrait ressembler l'appel de mixin avec plusieurs paramètres, dont certains sont des listes séparées par des virgules.

4
Michał Rybak

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

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

Exemple long:

Définition:

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

Utilisation:

.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/#string-functions-e

0
Andrei Surdu