What is SCSS extend and how does it work?

What is SCSS extend and how does it work?

SCSS extend is a feature that allows one selector to inherit the styles of another, promoting code reuse.

Can you give me an example of how to use extend?

Sure! If you have a class .button and you want another class .primary-button to inherit its styles, you can write:

.button {
  padding: 10px;
  color: white;
}

.primary-button {
  @extend .button;
  background-color: blue;
}

Are there any downsides to using extend?

Yes, using extend can lead to larger CSS files and specificity issues if not managed carefully.

When should I use SCSS extend?

Use SCSS extend when you have common styles that need to be shared across multiple selectors to keep your code DRY.