Проширување на класи во 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);
}