usar - ¿Cómo se crean múltiples valores de sombreado de caja en LESS CSS

usar variable javascript en css

Question

Lee esto

Hay varias respuestas "correctas" . Como esta pregunta genera mucho tráfico, pensé que debería estar al día con lo que (creo) es la mejor respuesta (basada en la documentación LESS) a medida que el proyecto LESS madura, y cambiar mi respuesta aceptada en consecuencia.

Estoy usando LESS y no he podido encontrar una solución para permitir múltiples sombras de caja CSS3. Tengo la siguiente mixin:

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

y estoy intentando esto:

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

Esto funciona en CSS3 normal, pero falla cuando se ejecuta desde un archivo LESS. He leído en alguna parte que la coma que separa las 2 sombras es lo que causa el problema en el analizador LESS.

¿Alguien sabe cómo hacer que esto funcione? La única solución que puedo pensar es crear un archivo CSS adicional que contenga mis múltiples propiedades de sombreado de cuadro.

Answer 1

Esto funciona con versiones más nuevas de LESS:

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

Y esta versión más fea funciona incluso con versiones más antiguas de LESS:

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

Actualización: MENOS evolucionado, por lo que esta respuesta se actualizó y ahora es correcta nuevamente. Gracias Michał Rybak

Answer 2

La mejor solución es hacer sobrecargas por separado para cada número de sombras. Menos maneja la resolución de sobrecarga adecuada:

.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, todavía estoy aprendiendo sobre LESS, pero parece que en realidad mezclará TODAS las sobrecargas en ciertas situaciones, en lugar de la que tiene la lista de parámetros más aplicable, por lo que puede obtener resultados variables. Desde entonces he revisado mis mixins para que se llamen box-shadow-2 o box-shadow-3, para que coincida con el número esperado de parámetros. Revisaré mi respuesta una vez que descubra qué está pasando / tengo una mejor solución.

Answer 3

MENOS quita la coma. Entonces el valor de @arguments convierte en:

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

Que no es válido como una sombra de caja.

En cambio, haz esto cuando quieras una coma:

@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

debería funcionar bien. Lo he usado antes Prueba con este mixin:

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

Y entonces:

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

Answer 5

Aquí hay otra solución (que prefiero más):

Use la función de cadena e() . Ej: e("S1, S2") devolverá S1, S2 sin comillas.

Largo ejemplo:

Definición:

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

Uso:

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

Salida:

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

Referencia: http://lesscss.org/functions/#string-functions-e

Answer 6

Esta pregunta está un poco desactualizada, ya que por ahora su solución realmente funciona.

Sin embargo, intentaré explicar por qué, porque muchas personas parecen desconocer eso:

En realidad, pasar una lista de argumentos separados por comas a un mixin es bastante simple: simplemente use punto y coma ( ; ) en lugar de coma en la llamada mixin.

De MENOS documentación :

Los parámetros son punto y coma o separados por comas. Se recomienda usar punto y coma. La coma de símbolo tiene doble significado: puede interpretarse como un separador de parámetros mixin o como un separador de listas css. El uso de la coma como separador de mezcla hace que sea imposible usar una lista separada por comas como argumento.

Semicolon no tiene tal limitación. Si el compilador ve al menos un punto y coma dentro de la llamada o declaración mixin, asume que los argumentos están separados por punto y coma. Todas las comas pertenecen a listas css.

La definición de Mixin usa una sintaxis regular conocida:

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

Pero la llamada mixin debe usar punto y coma para separar los argumentos. Si se usan puntos y comas, las comas ya no se tratan como separadores y se pasan a mixin sin problemas:

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

Tenga en cuenta que si (como en el caso anterior) solo se pasa una lista , también debe usar punto y coma al final.

Consulte mi respuesta con respecto a los fondos múltiples para ver cómo debería verse la llamada mixin con múltiples parámetros, algunos de los cuales son listas separadas por comas.

Answer 7

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