Osztályok kiterjesztése LESS-ben
A mixinek az a hátránya, hogy kódduplikációhoz vezetnek. Nézzünk egy példát, hogy mi is értendő ez alatt.
Tegyük fel, hogy a következő kódunk van:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ez a kód a következőképpen fog kompilálódni, duplikációt generálva:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Tömörebb lenne, ha ez a kód így kompilálódna:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Ezt elérhetjük a &:extend parancs használatával,
ami nem helyezi be a mixint közvetlenül a
kódba, hanem kiterjeszti a megadott osztályt. Javítsuk
a kódunkat:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Mesélje el, mi lesz a következő kód kompilálásának eredménye:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Mesélje el, mi lesz a következő kód kompilálásának eredménye:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Mesélje el, mi lesz a következő kód kompilálásának eredménye:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Mesélje el, mi lesz a következő kód kompilálásának eredménye:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Mesélje el, mi lesz a következő kód kompilálásának eredménye:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
