Parámetros con comas en LESS
Supongamos que tenemos una función que crea la sombra de un bloque:
.shadow(@s) {
box-shadow: @s;
}
Como puedes ver, nuestra función tiene un parámetro. Esto significa que pasaremos a este parámetro todos los valores de nuestra sombra separados por espacios, así:
div {
.shadow(1px 1px red);
}
Sin embargo, en CSS se pueden especificar múltiples sombras, escribiéndolas separadas por comas. En nuestro caso, desafortunadamente, esto no funcionará, porque la coma será interpretada por el compilador como un separador entre parámetros de la función:
div {
.shadow(1px 1px red, 1px 1px blue); // dará un error
}
Sin embargo, hay una solución. Podemos hacer que LESS interprete nuestra cadena con una coma como un solo parámetro. Para hacer esto, necesitamos terminar la lista de nuestros valores con un punto y coma:
div {
.shadow(1px 1px red, 1px 1px blue;);
}
Crea una función que agregue fondo. Usando esta función, agrega varios fondos a un bloque.