Разширяване на класове в 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);
}