Razširjanje razredov v LESS
Pomanjkljivost mešanic je, da pride do podvajanja kode. Poglejmo si na primeru, kaj to pomeni.
Recimo, da imamo naslednjo kodo:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ta koda se bo prevedla na naslednji način, kar povzroči podvajanje:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Bolj kompaktno bi bilo, če bi se ta koda prevedla na naslednji način:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Tega je mogoče doseči z uporabo ukaza &:extend,
ki ne vstavi mešanja neposredno v
kodo, ampak razširi dani razred. Popravimo
našo kodo:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
