Kupanua Madarasa katika LESS
Upungufu wa mixins ni kwamba matokeo yake ni kurudia kwa msimbo. Hebu tuangalie kwa mfano, ina maana gani.
Hebu tuchukulie tuna msimbo ufuatao:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Msimbo huu utakusanywa kwa njia ifuatayo, na kusababisha kurudia:
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Ingelikuwa kompakt zaidi ikiwa msimbo huu ungalikusanywa kwa njia ifuatayo:
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Hii inaweza kufikiwa, kwa kutumia amri &:extend,
ambayo haingizi mchanganyiko moja kwa moja kwenye
msimbo, bali inapanua darasa lililopewa. Hebu
tusahihishe msimbo wetu:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Eleza, matokeo ya kukusanywa ya msimbo ufuatao yatakuwa yapi:
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Eleza, matokeo ya kukusanywa ya msimbo ufuatao yatakuwa yapi:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Eleza, matokeo ya kukusanywa ya msimbo ufuatao yatakuwa yapi:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Eleza, matokeo ya kukusanywa ya msimbo ufuatao yatakuwa yapi:
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Eleza, matokeo ya kukusanywa ya msimbo ufuatao yatakuwa yapi:
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}