¿Qué es una directiva @extend en SASS?

Sass es la abreviatura de Syntactically Awesome Style Sheet. Es una actualización de las hojas de estilo en cascada (CSS) y es uno de los preprocesadores populares disponibles para escribir CSS.

@extend es una palabra clave en Sass que permite compartir un conjunto de propiedades CSS de un selector a otro. Esto es útil para reutilizar estilos y hacer que la hoja de estilos sea más modular. Está presente en los tres preprocesadores disponibles para CSS.

Funcionamiento de la directiva @extend

Sass usa la unificación de inteligencia al extender los selectores. Aquí están las reglas de la siguiente manera:

• Combina dos selectores juntos si coinciden en todos los aspectos.
• Recorta y reduce los selectores que son redundantes al mismo tiempo que garantiza que su especificidad siga siendo mayor o igual que la del extensor.
• Sabe cómo manejar combinadores, selectores universales y pseudoclases que contienen selectores.
• También trata de mezclar selectores complejos para que continúen su trabajo independientemente del orden en que se aniden los elementos HTML.
• Se asegura de no generar selectores que posiblemente no puedan apuntar a ningún elemento.

Diferencia entre @extend y Mixin

Esta es una pregunta general que le llega a todas las personas que comienzan con Sass. De acuerdo con la documentación, el siguiente punto podría usarse para eliminar la confusión:

• Se recomienda utilizar @extend cuando tenga que expresar una relación entre clases relacionadas (también conocidas como clases semánticas).
• Se recomienda utilizar mixins cuando no existe relación entre colecciones de estilos. De esta manera, puede personalizarlo aceptando parámetros. Esto lo hace fácilmente configurable y también utilizable para diferentes circunstancias.

Alcance de extensión y selectores de marcador de posición

• Alcance de extensión: se puede decir que Sass tiene un flujo aguas arriba. Esto hace que sus reglas sean predecibles y también fáciles de entender. Cuando una hoja de estilo extiende un selector, el efecto solo se verá en los módulos que están aguas arriba y se cargan usando la regla @use o @forward y de manera similar en sentido ascendente. Esto también se conoce como ámbito de extensión. 

• Selectores de marcadores de posición: los selectores de marcadores de posición, como su nombre lo describe, se utilizan como marcadores de posición para el estilo. Entran en juego cuando desea su versión extendida en la salida CSS pero no el estilo en sí. Los selectores que se van a utilizar como selectores de marcador de posición comienzan con un porcentaje (%) y no como los selectores generales que comienzan con un punto (.).

Los siguientes ejemplos demuestran la directiva @extend.

Ejemplo 1: Suponga que tiene dos clases, imagen de fondo y ProfileImage y ambas requieren algunos estilos comunes. La directiva @extend se puede usar como se muestra en este ejemplo.

.backgroundImage{
    border-radius:50%;
    height:100px;
    width:100px;
}

.profileImage{
    @extend .backgroundImage;
    border:none;
}

Salida: Esto llevará al compilador a la siguiente muestra de CSS.

.backgroundImage, .profileImage {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

.profileImage {
  border: none;
}

Ejemplo 2: para este ejemplo, extenderemos varias clases usando la directiva @extend.

.backgroundImage{
    border-radius:50%;
    height:100px;
    width:100px;
}

.profileImage{
    @extend .backgroundImage;
    border:none;
    filter: grayscale(100%);
}
.finalImage{
    @extend .profileImage;
}

Salida:  Esto se transpila al siguiente CSS.

.backgroundImage, .profileImage, .finalImage {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

.profileImage, .finalImage {
  border: none;
  filter: grayscale(100%);
}