La cuarta característica útil nos permite aplicar propiedades CSS predefinidas de un elemento a otro, creando una relación entre selectores. Esto significa que un selector puede heredar las propiedades de otro selector.

Ahora, observemos la imagen a continuación, que muestra dos elementos de botón:

Tenemos dos botones: "send" y "submit". La única diferencia entre estos elementos es el valor de la propiedad background-color. Por lo tanto, podemos definir los estilos para el botón "send" y hacer que el botón "submit" herede esos estilos.

El código html es:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Veamos cómo podemos heredar estilos con la ayuda de sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

El selector .submit-button hereda todos los estilos del selector .send-button utilizando la directiva @extend.