Difference Between extend and mixins in SASS
The main difference between using
@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.
One limitation with
@extend that applies to placeholder selectors as well is that it doesn't work between rules in different
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
The output will be like this:
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.