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!