O quarto recurso útil permite aplicar propriedades CSS predefinidas de um elemento a outro, criando uma relação entre seletores. Isso significa que um seletor pode herdar as propriedades de outro seletor.

Agora, observe a imagem abaixo, que mostra dois elementos de botão:

Temos dois botões: "send" e "submit". A única diferença entre esses elementos é o valor da propriedade background-color. Portanto, podemos definir os estilos para o botão "send" e fazer com que o botão "submit" herde esses estilos.

O código html é:

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

Veja como podemos herdar estilos com a ajuda do 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;
}

O seletor .submit-button herda todos os estilos do seletor .send-button usando a diretiva @extend.