@extend y herencia en Sass | Explicado

Escribir un código CSS limpio y legible que no repite valores redundantes es absolutamente posible usando la hoja de estilo sintácticamente impresionante (SASS). Mientras que los elementos de estilo en una página web a menudo nos encontramos con una situación en la que los elementos tienen un estilo similar solo en detalles menores. Escribir una hoja de estilo para tales elementos podría resultar muy agitado porque la cantidad de valores redundantes sería enorme. Para evitar tales situaciones, Sass proporciona la regla @extend. Esta publicación discute esta regla en detalle.

Regla y herencia sass @extend

Cuando sus elementos tienen un estilo de manera similar, solo difieren en detalles menores, entonces desea heredar propiedades similares de un elemento a otro. Esto es posible usar la regla @extend que le permite heredar las propiedades utilizadas para un selector a otro.

Intentemos comprender esta regla y cómo ayuda a heredar propiedades CSS similares con la ayuda de un ejemplo.

Ejemplo

En el ejemplo a continuación, suponemos que hay múltiples mensajes que aparecen en nuestro sitio web, como mensaje de error, mensaje de advertencia, mensaje de éxito, etc. Con el fin de diseñar estos elementos, primero estamos definiendo una clase .Estado de mensajes que contiene todas las propiedades que son redundantes para todos los tipos de mensajes que aparecen en nuestro sitio web.

Hablar con descaro a

.estándar de mensajes
relleno: 5px;
borde: 2px gris sólido;
Text-Align: Center;
color blanco;

Ahora este es el estilo básico que todos los mensajes tendrán sin importar cuál sea su tipo. Ahora, cuando se trata de diseñar estos mensajes por separado, puede heredar estas propiedades desde el .Clase estándar de mensajes junto con la escritura de otras propiedades de estilo para cada tipo de mensaje.

Hablar con descaro a

.Mensaje-error
@extender .Mensaje estándar;
color de fondo: azul;

.Warning de mensajes
@extender .Mensaje estándar;
Color de fondo: rojo;

.Message-Tucces
@extender .Mensaje estándar;
Color de fondo: verde;

Ahora puede notar que en el fragmento de código anterior hemos usado la regla @extend para heredar las propiedades de la .Clase estándar de mensajes para diseñar cada tipo de mensaje mientras tanto, lo que les da a cada uno un color de fondo diferente. Esto puede ahorrar mucho tiempo y energía y la cantidad de líneas de código se reduce.

El archivo de salida CSS resultante se verá así.

.estándar de mensajes, .error de mensaje, .advertencia de mensajes, .Message-Tucces
relleno: 5px;
borde: 2px gris sólido;
Text-Align: Center;
color blanco;

.Mensaje-error
color de fondo: azul;

.Warning de mensajes
Color de fondo: rojo;

.Message-Tucces
Color de fondo: verde;

Al referirse a estas clases en su código HTML, no es necesario consultar varias clases, solo puede usar las clases asignadas a cada uno de los mensajes. Por ejemplo, no uses esto

, Simplemente usa esto

.

Conclusión

La regla @extend en SASS le permite heredar propiedades similares cuando sus elementos tienen un estilo similar solo en detalles menores. Puede definir el estilo básico de tales elementos en una clase y luego heredar esa clase usando la regla @extend en otras clases junto con un estilo adicional para ese elemento en particular. El uso de esta regla puede ahorrar mucho tiempo y reducir las líneas de código, así que limpia su código.