¿Qué es la herencia y cómo funciona en SASS?

Inheritance Sass

El concepto de la herencia en Sass, es un concepto bastante sencillo, pero muy poderoso, que si lo sabes aplicar va a acelerar y optimizar tu desarrollo.
.
Muchas veces al estar creando nuestros estilos podemos caer en la repetición de código, esto conlleva a dos problemas, Primero se comienza a extender bastante la hoja de estilos y se vuelve difícil de mantener a lo largo del tiempo, el otro problema que puede surgir es el desorden, entonces, si queremos arreglar o cambiar alguna parte de nuestro código va a ser más difícil hacerlo.
.
Por suerte tenemos a nuestro buen amigo SASS, piénsalo así, muchas veces usamos patrones de diseño, responsive es patrones, nos dan ciertas guías o convenciones para saber como organizar CSS, el más usado es BEM.
.
BEM nos propone crear estilos generales con una clase y luego modificar esa clase según nos convenga, por ejemplo:

<div class="error error--serious">
  Oh no! You've been hacked!
</div>

En este ejemplo tenemos un div con dos clases “error” y “error–serious”, una buena opción para estilizar este div, suponiendo que los necesitáramos reutilizar más adelante, sería de la siguiente forma:
.

• Estilizamos la clase general con los estilos básicos que se repetirán a lo largo de los div
• Luego estilizamos el div en específico que tendrá otros estilos adicionales

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

Pero esto se puede simplificar a un más usando la herencia con SASS

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

De esta manera no solo estamos organizando el código y evitando reutilizar código, si no además se puede entender de una mejor forma de donde viene los estilos heredados y a que clase hacen referencia

Uff ahora si se vienen los @extend uwu

![](

Además del @extend, Sass también proporciona otras características que facilitan la herencia y la reutilización de estilos, como las funciones y mixins. Estos elementos ofrecen formas más flexibles y poderosas de compartir y heredar estilos.

.

Yo lo que hago es que hago unas clases globales, y luego uso clases con modificador. Claro está que no conocia estas funciones.

<button class="button__primary hero__content--button">Conoce más</button>


CSS

.button__primary {
    padding: 1.2rem 1.8rem;
    min-height: 4.4rem;
    width: fit-content;
    background-color: $primary-text-color;
    color: $primary-color;
    font-weight: bold;
    border:none;
    border-radius: 2rem;
}

CSS + MOD 

        hero__content--button {
            margin-inline-start: 0;
            margin-block-start: 2rem;
        }