Uitbreiden van klassen in LESS
Het nadeel van mixins is dat het leidt tot duplicatie van code. Laten we met een voorbeeld kijken wat daarmee wordt bedoeld.
Stel dat we de volgende code hebben:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Deze code wordt als volgt gecompileerd, wat duplicatie veroorzaakt:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Het zou compacter zijn als deze code als volgt zou worden gecompileerd:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Dit kan worden bereikt door gebruik te maken van de opdracht &:extend,
die niet de mixin rechtstreeks in de
code plaatst, maar de opgegeven klasse uitbreidt. Laten we
onze code corrigeren:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
