LESS-da klasslarni kengaytirish
Miksinlarning kamchiligi shundaki, kod takrorlanishi kelib chiqadi. Keling, misol orgali nima degani tushunib olaylik.
Faraz qilaylik, bizda quyidagi kod mavjud:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ushbu kod quyidagicha kompilyatsiya qilinadi, va kod takrorlanishiga olib keladi:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Kod quyidagicha kompilyatsiya qilinganda ancha ixcham bo‘lardi:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Bunga &:extend buyrug‘i yordamida erishish mumkin,
u miksinlarni to‘g‘ridan-to‘g‘ri kodga
kiritmasdan, balki berilgan klassni kengaytiradi. Keling
kodimizni tuzatamiz:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
