Дар LESS калодҳоро васеъ кардан
Нуқси миксинҳо он аст, ки такрори код ба амал меояд. Биёед ба мисол нигарем, ки мақсад чӣ гуна аст.
Бигзор мо коди зеринро дорем:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ин код ба тариқи зерин компилятсия мешавад, ки такрори кодро ба вуҷуд меорад:
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Агар ин код ба тариқи зерин компилятсия мешуд, мутаносибтар мебуд:
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Инро бо истифода аз фармони &:extend ба даст овардан мумкин аст,
ки меъёрро бевосита ба
код ворид намекунад, балки калоди додашударо васеъ мекунад.
Биёед коди худро ислоҳ кунем:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Ба гуфта намоед, натиҷаи компилятсияи коди зерин чӣ гуна хоҳад буд:
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Ба гуфта намоед, натиҷаи компилятсияи коди зерин чӣ гуна хоҳад буд:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Ба гуфта намоед, натиҷаи компилятсияи коди зерин чӣ гуна хоҳад буд:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Ба гуфта намоед, натиҷаи компилятсияи коди зерин чӣ гуна хоҳад буд:
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Ба гуфта намоед, натиҷаи компилятсияи коди зерин чӣ гуна хоҳад буд:
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}