Better SCSS pseudo elements using @extend

Every now and then you want your pseudo element(s) to have the same properties as its parent, so just extend them!

“The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector.”

Read more <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend">here</a>.

I used this recently in a project for a loading icon:

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

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

Compiles to:

.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;
}

Cool beans!