Extensión de clases en LESS
La desventaja de los mixins es que resulta en duplicación de código. Veamos con un ejemplo a qué nos referimos.
Supongamos que tenemos el siguiente código:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Este código se compilará de la siguiente manera, generando duplicación:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Sería más compacto si este código se compilara de la siguiente manera:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Esto se puede lograr usando el comando &:extend,
que no inserta el mixin directamente en
el código, sino que extiende la clase dada. Arreglemos
nuestro código:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Explica cuál será el resultado de la compilación del siguiente código:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Explica cuál será el resultado de la compilación del siguiente código:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Explica cuál será el resultado de la compilación del siguiente código:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Explica cuál será el resultado de la compilación del siguiente código:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Explica cuál será el resultado de la compilación del siguiente código:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
