Melhores pseudo-elementos SCSS usando @extend

De vez em quando, você deseja que seu (s) pseudo (s) elemento (s) tenham as mesmas propriedades de seu pai, então apenas estenda-os!

“A diretiva @extend evita esses problemas dizendo ao Sass que um seletor deve herdar os estilos de outro seletor.”

Leia mais <a href=” http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend”> aqui </a>.

Eu usei isso recentemente em um projeto para um ícone de carregamento:

.loading {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #b4da55;

  &:after {
    content: '';
    @extend .loading;
    background: #fff;
    animation: expand 0.75s infinite alternate;
  }
}

Compila para:

.loading, .loading:after {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #b4da55;
}
.loading:after {
  content: '';
  background: #fff;
  animation: expand 0.75s infinite alternate;
}

Feijão legal!