Difference Between extend and mixins in SASS

  0 comments Share with:

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.

Mixin screen

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

Mixin css

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

extend image

than the generated CSS will have shorter code.

Extend screen image

Limitations

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

Extend media image

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

Extend media err

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:

media screen

The output will be like this:

Media succ

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.

Add new comment