A word on Sass @extend

@extend is a powerful SASS tool that helps keep your code nice and dry, but it can have drawbacks if used incorrectly. Calling @extend on a class or placehodler will add the extended class to the extending class’ selector list. Take this example:

.message {
  border: 1px solid black;
  color: black;
  padding: 10px 5px;
}

.success {
  @extend .message;
  border-color: green;
}

.warn {
  @extend .message;
  border-color: yellow;
}

.fail {
  @extend .message;
  border-color: red;
}

We create a .message class, and extend it across a few more classes with only a change to the border-color. When compiled, we get:

.message,
.success,
.warn,
.fail {
  border: 1px solid black;
  color: black;
  padding: 10px 5px;
}

.success {
  border-color: green;
}

.warn {
  border-color: yellow;
}

.fail {
  border-color: red;
}

Great! We’ve got an extremely effecient, dry output. However, using @extend improperly can leave a massive trail of selectors you just don’t need. For example:

.foo {
  .bar {
    .message {
      color: black;
      border: 1px solid black;
      padding: 10px 5px;
    }
  }
}

.baz {
  .buzz {
    .error {
      @extend .message;
      border-color: red;
    }
  }
}

Will result in:

.foo .bar .message,
.foo .bar .baz .buzz .error,
.baz .buzz .foo .bar .error {
  color: black;
  border: 1px solid black;
  padding: 10px 5px;
}

.baz .buzz .error {
  border-color: red;
}

Yikes. Is it even worth the trouble?

The real answer is…maybe? If you’re running into selector issues, consider using a mixin instead. But if you totally understand how @extend works, and there’s a use-case that stands out, great! Go for it! Otherwise, it may not be worth forcing into a stylesheet just for the sake of using it.