What are some examples of using the `@extend` feature in Sass?

What are some examples of using the @extend feature in Sass?

The @extend feature in Sass allows you to share a set of CSS properties from one selector to another. For example, if you have a base class for buttons, you can extend it to create different button styles.

Can you show me a specific code example?

Sure! Here's a simple example:

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: blue;
  color: white;
}

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

.secondary-button {
  @extend .button;
  background-color: red;
}

In this example, both .primary-button and .secondary-button inherit the styles from .button.

What happens if I change the base class?

If you change the styles in the base class, all the classes that extend it will automatically inherit those changes. This makes it easy to maintain consistent styles across your project.

Are there any drawbacks to using @extend?

Yes, while @extend can reduce code duplication, it can also lead to more complex CSS selectors and larger CSS files if overused. It's important to use it judiciously.