The main difference between using @extend and @mixin is in the output CSS. Like, if you want to create 5 box and only the color of the background would be changed. And you use mixins.

The output would have the same code for every box generated and only the color codes of background would be different

In the case of extend generic ?placeholder selector? for box and set for each one only different background color

than the generated CSS will have shorter code.

Limitations

One limitation with @extend that applies to placeholder selectors as well is that it doesn't work between rules in different @media blocks.

The output error would be like this :

• You may not @extend an outer selector from within @media.
• You may only @extend selectors within the same directive.
• From "@extend %icon" on line 8 of icons.scss

It does work but we have to use other way. Any @media queries surrounding the placeholder selector will be applied to the selectors extending it providing they are not in an @media block:

The output will be like this:

Conclusion

In situation when you want to load your site as fast as possible @extend approach is good idea. But always this things depends on the situation. It has some limitation too.