¿Cuál es el uso de Mixins en LESS?

En este artículo, sabremos qué son los Mixins en LESS, además de comprender su implementación y uso a través del ejemplo. Un preprocesador CSS es un programa que genera el código CSS utilizando el conjunto de reglas del preprocesador definido y facilita la reducción de la complejidad general del código CSS. LESS es un preprocesador de CSS que es una extensión de lenguaje compatible con versiones anteriores de CSS. Los mixins en LESS son una forma de incluir un montón de propiedades CSS de un conjunto de reglas a otro, es decir, varias veces en el mismo archivo.

Por ejemplo, considere que tenemos varios botones (asumiendo que tienen una identificación/clase de botón diferente) en la página web, cada uno con un color diferente y con un tamaño de fuente y propiedades de relleno similares. Ahora, si necesitamos escribir propiedades CSS similares para estos botones, entonces tenemos que repetir el bloque de código varias veces, para cada botón, y por lo tanto, el tamaño del código se vuelve largo. Mezclar en LESS puede ser útil para reducir y descartar las propiedades repetitivas utilizadas en el código. Usando LESS, podemos definir todas esas propiedades repetitivas dentro de una mezcla con el nombre, digamos, «button_basic» y definir todas esas propiedades repetitivas dentro de él.

Sintaxis:

// Mixin in LESS

.button_basic{
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
}

Ejemplo : En este ejemplo, hemos usado el mixin anterior simplemente llamándolo como una función dentro de los otros bloques de elementos.

/*LESS file */

.button_basic{
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
}
.btn1{
    .button_basic();
    background-color: rgb(235, 141, 141);
}
.btn2{
    .button_basic();
    background-color: rgb(94, 94, 230);
}
.btn3{
    .button_basic();
    background-color: violet;
}

Del ejemplo de código anterior, hemos llamado a los mixins » .border-basic » declarados dentro de las clases «btn1», «btn2» y «btn3». Después de compilar el código anterior, generará el siguiente código CSS nativo.

.button_basic {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
}
.btn1 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #eb8d8d;
}
.btn2 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #5e5ee6;
}
.btn3 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: violet;
}

Este es el uso básico de mixins en Less. Ahora, comprendamos algunos otros conceptos que pueden ser aplicables a los mixins.

Mixins paramétricos: podemos pasar argumentos en mixins definiendo los argumentos en la parte superior de los mixins.

Sintaxis:

.button_basic(@background_color){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
    background-color: @background_color;
}

Ejemplo : aquí, podemos llamar al mixin anterior, al igual que otros mixins, y en el momento de llamar pasamos los valores a los argumentos de los mixins.

/*Less Code file*/

.button_basic(@background_color){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
    background-color: @background_color;
}
.btn1{
    .button_basic(rgb(235, 141, 141));
   
}
.btn2{
    .button_basic(rgb(94, 94, 230));
 
}
.btn3{
    .button_basic( violet);
   
}

Cuando se compila el código LESS anterior, se obtiene el siguiente código CSS:

.btn1 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #eb8d8d;
}
.btn2 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #5e5ee6;
}
.btn3 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: violet;
}

También podemos dar valores predeterminados a los mixins paramétricos, como se muestra a continuación:

.button_basic(@background_color:red){
   font-size: 1em;
   padding: 1em;
   font-family: 'Times New Roman', Times, serif;
   background-color: @background_color;
}
.button1{
   .button_basic();
}

Cuando el código anterior se compila en CSS, se obtiene el siguiente código:

.button1 {
  font-size: 1em;
  padding: 1em;
  font-family: 'Times New Roman', Times, serif;
  background-color: red;
}

Al llamar a los mixins anteriores, si no pasamos ningún valor en el momento de la llamada, se usará el valor predeterminado del argumento en esos casos.

Selectores en Mixins: También podemos usar selectores con mixins. Aquí hay un ejemplo que se da a continuación:

Sintaxis:

.button_basic(){
   &:hover{
      background-color: white;
  }
}

Ejemplo : en el ejemplo anterior, el selector flotante se usa dentro de los mixins y se puede llamar desde otros elementos.

/*LESS Code file */

.button_basic()
{
  &:hover
  {
      background-color: white;
  }
}
.btn1
{
    .button_basic();
}

Cuando el código anterior se compila en CSS, da como resultado el siguiente código:

.btn1:hover {
  background-color: white;
}

!Palabra clave importante: podemos usar la palabra clave !importante junto a una combinación para hacer que una combinación completa sea «importante».

Ejemplo: aquí hay un ejemplo, donde hemos hecho que el mixin sea importante cuando se llama desde otro elemento.

/* Less Code */
.button_basic(){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
  }

.btn2{
    .button_basic() !important;

}

Cuando el código anterior se compila en CSS, se obtiene el siguiente código:

/*CSS code */
  
.btn2 
{
  font-size: 1em !important;
  padding: 1em !important;
  font-family: 'Times New Roman', Times, serif !important;
}

Por lo tanto, hemos discutido el uso de Mixins y también muchas características de mixins en LESS. La función mixin en LESS es una de las funciones muy útiles cuando se escribe código CSS largo donde se deben repetir muchos elementos. No solo guarda la línea de código, sino que también reduce la complejidad del código.

Referencia: https://lesscss.org/features/#mixins-feature