Uitbreiding van klasse in LESS
Die nadeel van mengsels is dat dit duplikasie van kode tot gevolg het. Kom ons kyk na 'n voorbeeld om te sien wat bedoel word.
Gestel ons het die volgende kode:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Hierdie kode sal as volg saamgestel word, wat duplikasie skep:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Dit sou meer kompak wees as hierdie kode as volg saamgestel word:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Dit kan bereik word deur die opdrag &:extend te gebruik,
wat nie die mengsel direk in die
kode plaas nie, maar die gegewe klas uitbrei. Kom ons
korrigeer ons kode:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Beskryf wat die resultaat van die samestelling van die volgende kode sal wees:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Beskryf wat die resultaat van die samestelling van die volgende kode sal wees:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Beskryf wat die resultaat van die samestelling van die volgende kode sal wees:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Beskryf wat die resultaat van die samestelling van die volgende kode sal wees:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Beskryf wat die resultaat van die samestelling van die volgende kode sal wees:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
