SCSS @mixins vs @extend

[Pavel]

Hello,

what is the difference here?

when should i use one or the other?

keep it simple for me 🙂

thanks!

 

[Chaos]

SCSS @mixins:

• Use mixins when you want to include a set of styles into multiple selectors or rules.
• Mixins allow you to define reusable blocks of styles that can be included wherever needed.
• They are useful for keeping your code DRY (Don't Repeat Yourself).

Example:

@mixin button-styles {
padding: 10px;
border: 1px solid #333;
background-color: #fff;
}

.button {
@include button-styles;
}

.another-button {
@include button-styles;
}

SCSS @extend:

• Use @extend when you want one selector to inherit all the styles of another selector.
• It helps in creating a relationship between selectors and avoids duplicating styles.

Example:

.button-styles {
padding: 10px;
border: 1px solid #333;
background-color: #fff;
}

.button {
@extend .button-styles;
}

.another-button {
@extend .button-styles;
}

When to use which:

• Use @mixins when you have a set of styles that you want to reuse in different places.
• Use @extend when you want one selector to inherit all the styles of another selector to avoid repeating styles.

Remember, both @mixins and @extend can be used, and the choice depends on your specific use case and the level of control you need over your styles. If you want more flexibility and control over where styles are applied, go for @mixins. If you want a direct relationship between selectors, use @extend.