Unión mediante comas en LESS
Supongamos que tenemos una función que crea una sombra de bloque:
.shadow(@s) {
box-shadow: @s;
}
Supongamos que queremos agregar dos sombras al bloque, llamando nuestra función dos veces:
p {
.shadow(1px 1px red);
.shadow(2px 2px blue);
}
Sin embargo, no tendremos éxito, porque
llamar dos sombras simplemente agregará dos propiedades
box-shadow:
p {
box-shadow: 1px 1px red;
box-shadow: 2px 2px blue;
}
Y nos gustaría que las sombras se agregaran
a una propiedad box-shadow separadas por comas,
así:
p {
box-shadow: 1px 1px red, 2px 2px blue;
}
Para que nuestra función funcione de la manera descrita,
es necesario escribir el valor de la propiedad después
del operador especial +:, así:
.shadow(@s) {
box-shadow+: @s;
}
Crea una función similar para la propiedad
text-shadow.
Crea una función similar para la propiedad
background.
