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

LESS es uno de los lenguajes de preprocesador CSS más populares debido a sus muchas funciones, como mezclas , importaciones, variables, etc., que ayudan a reducir la complejidad del código CSS. Una característica importante y útil de LESS es la directiva @extend. En este artículo, aprenderemos sobre el uso de la función de extensión en LESS.

Extend in LESS nos ayuda a fusionar diferentes selectores con los que se pone. Podemos usar la característica LESS extender usando la palabra clave :extender .

Sintaxis:

.elem1:extend(.elem1){};

También se puede usar dentro de una clase para extender las propiedades de una clase.

&:extend(.elem1);

Ejemplo 1: Usamos la función de extensión dentro del archivo . bloque btn2 para ampliar la característica de la clase .btn1 .

.btn1{
    background-color: blue;
    border: 2px solid white;
}
.btn2{
    color: whitesmoke;
    &:extend(.btn1);
}

Producción:

.btn1,
.btn2 {
  background-color: blue;
  border: 2px solid white;
}
.btn2 {
  color: whitesmoke;
}

Ejemplo 2: en este ejemplo, .btn2 se amplía con la clase .btn1 .

.btn1{
    background-color: blue;
    border: 2px solid white;
}
.btn2:extend(.btn1){};

Producción:

.btn1,
.btn2 {
  background-color: blue;
  border: 2px solid white;
}

También podemos extender múltiples selectores en un selector. Esto se puede hacer usando dos métodos diferentes. La sintaxis de ambos es el método que se indica a continuación:

Ampliación de selectores interpolados: la palabra clave extend no se puede utilizar para hacer coincidir selectores con variables, pero funciona con variables interpoladas.  

Ejemplo 1:

@variable: .heading2;
@{variable} {
  color: blue;
}
.heading1:extend(.heading2) {}

Producción:

.heading2{
  color: blue;
}

Ejemplo 2:

.heading1 {
  color: blue;
}
@{variable}:extend(.heading1) {}
@variable: .heading2;

Producción:

.heading1, .heading2 {
  color: blue;
}

Extender dentro de @media: si llamamos extender desde dentro de @media, solo coincidirá con los selectores dentro de los medios y el resto se quedará solo. A continuación se muestra un ejemplo de código que muestra lo siguiente, en el que tenemos que extender un selector dentro de las llaves @media. El siguiente ejemplo explica esto.

Ejemplo:

@media print {
    .head1:extend(.head2) {}
    .head2 {
      color: black;
    }
  }
  .head2 {
    color: red;
  }
  @media screen {
    .head2 {
      color: blue;
    }
  }

Salida: Extend solo extiende aquellos selectores que están dentro del mismo @media e ignora todo lo demás.

@media print {
  .head2,
  .head1 {
    color: black;
  }
}
.head2 {
  color: red;
}
@media screen {
  .head2 {
    color: blue;
  }
}