Komma-separert sammenkobling i LESS
La oss si at vi har en funksjon som lager en skygge for en boks:
.shadow(@s) {
box-shadow: @s;
}
La oss si at vi vil legge til to skygger til en boks ved å kalle funksjonen vår to ganger:
p {
.shadow(1px 1px red);
.shadow(2px 2px blue);
}
Det vil imidlertid ikke fungere, fordi
å kalle to skygger bare vil legge til to
box-shadow-egenskaper:
p {
box-shadow: 1px 1px red;
box-shadow: 2px 2px blue;
}
Men vi ønsker at skyggene skal bli lagt til
i en enkelt box-shadow-egenskap separert med komma,
slik som dette:
p {
box-shadow: 1px 1px red, 2px 2px blue;
}
For at funksjonen vår skal fungere på den beskrevne
måten, må egenskapsverdien skrives etter
en spesiell operator +:, slik som dette:
.shadow(@s) {
box-shadow+: @s;
}
Lag en tilsvarende funksjon for egenskapen
text-shadow.
Lag en tilsvarende funksjon for egenskapen
background.