Extend Sass e Herança

Instrução @extend do Sass

Extend A instrução permite que você compartilhe um grupo de propriedades CSS de um seletor para outro seletor.

Se você tiver elementos com estilos quase idênticos, mas diferentes em alguns detalhes pequenos, então Extend A instrução é muito útil.

O exemplo a seguir do Sass cria um estilo básico para o botão (este estilo será usado na maioria dos botões). Em seguida, criamos um estilo para o botão "Report" e um estilo para o botão "Submit". Os botões "Report" e "Submit" são definidos por Extend A instrução herda todas as propriedades CSS da classe .button-basic. Além disso, elas definem suas próprias cores:

Sintaxe do SCSS:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Após a compilação, o CSS será conforme abaixo:

Saída CSS:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

Ao usar Extend A instrução, você não precisa especificar várias classes para elementos no código HTML, por exemplo: <button class="button-basic button-report">Report this</button>. Basta especificar .button-report para obter dois conjuntos de estilos.

Extend As instruções ajudam a manter seu código Sass muito seco (DRY).