Concatenação com vírgula em LESS
Suponha que temos uma função que cria uma sombra para uma caixa:
.shadow(@s) {
box-shadow: @s;
}
Suponha que queremos adicionar duas sombras a uma caixa, chamando nossa função duas vezes:
p {
.shadow(1px 1px red);
.shadow(2px 2px blue);
}
No entanto, não teremos o resultado desejado, porque
chamar duas sombras simplesmente adicionará duas propriedades
box-shadow:
p {
box-shadow: 1px 1px red;
box-shadow: 2px 2px blue;
}
Mas o que queríamos era que as sombras fossem adicionadas
a uma única propriedade box-shadow, separadas por vírgula,
assim:
p {
box-shadow: 1px 1px red, 2px 2px blue;
}
Para que nossa função funcione da maneira descrita,
é necessário escrever o valor da propriedade após
um operador especial +:, assim:
.shadow(@s) {
box-shadow+: @s;
}
Crie uma função similar para a propriedade
text-shadow.
Crie uma função similar para a propriedade
background.
