Proširenje klasa u LESS-u
Mana miksera je u tome što dolazi do dupliranja koda. Pogledajmo na primeru šta se podrazumeva pod tim.
Neka imamo sledeći kod:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ovaj kod će se kompajlirati na sledeći način, stvarajući dupliranje:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Bilo bi kompaktnije da se ovaj kod kompajlirao na sledeći način:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
To se može postići korišćenjem naredbe &:extend,
koja ne ubacuje mešanje direktno u
kod, već proširuje zadatu klasu. Hajde da
ispravimo naš kod:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
