Cuando comenzamos a escribir estilos utilizando un lenguaje dinámico de hojas de estilos tendemos a hacer un uso excesivo de los mixins. Dada su potencia y su facilidad de uso, hace que el uso de ellos pueda llegar a realizarse sin control. Este abuso del uso de mixins se puede traducir en un crecimiento desmesurado del tamaño de nuestra hoja de estilos.
Veamos el siguiente ejemplo:
.foo {
width: 23px;
color: red;
text-align: center;
border: 1px solid red;
background-color: red;
}
.bar1 {
.foo(#444);
}
.bar2 {
.foo(#555);
}
Este sería el resultado de la compilación del fichero less:
.bar1 {
width: 23px;
color: red;
text-align: center;
border: 1px solid red;
background-color: red;
}
.bar2 {
width: 23px;
color: red;
text-align: center;
border: 1px solid red;
background-color: red;
}
Como podemos observar, el mixin .foo ha sido invocado en dos ocasiones y ha incluido su código en el interior de las clases donde se ha llamado. Podemos por tanto concluir que el uso extensivo de esta técnica puede hacer crecer nuestros fichero compilado en exceso.
Como solución a este problema tenemos una función denominada extend. Veamos su funcionamiento sobre el ejemplo anterior:
foo {
width: 23px;
color: @main-color-box;
text-align: center;
border: 1px solid red;
background-color: red;
}
.bar1 {
&:extend(.foo);
}
.bar2 {
&:extend(.foo);
}
El resultado de su compilación sería el siguiente:
.foo,
.bar1,
.bar2 {
width: 23px;
color: red;
text-align: center;
border: 1px solid red;
background-color: red;
}
A la vista del resultado vemos que con esta técnica el fichero generado es mucho menor. En futuros artículos os mostraremos otros usos del extend, sus variantes así como el uso de la interpolación en esta característica de lenguaje less.
Espero que os haya servido de ayuda.