SASS - Extend and Placeholder

My goal is to post a few front end related posts. When talking about SASS, it’s important to make sure the concept of @extend and %placeholder are well understood.

• @extend is a way the preprocessors of CSS use to make a reference to previously defined style. This is a good reference, however the idea is pretty much:

Sass:

.moo {
  margin-top: 10px;
}
.foo {
  @extend .moo;
}

CSS:

.moo, .foo {
  margin-top: 10px;
}

• %placeholder is a selector that define a style, however difference from others it will not be present on the generated CSS, only the selectors that @extend-ed it. Here is a good reference.

Sass:

%bar {
  margin-top: 10px;
}
.lol {
  @extend %bar;
}

CSS:

.lol {
  margin-top: 10px;
}

Cheers.