Flexible SASS @mixin for each viewport (Breakpoint)

In my previous post, I have mentioned few useful tips on @mixin for SASS. In this post I have improvise SASS @mixin for the Breakpoint. I have updated the @mixin for the breakpoint to include any last minute changes to target any width/viewport just by entering the pixel width at the time of @include.

In one of my recent project I was working on last minute changes to fix issue on odd viewport. Breakpoint @mixin from previous post was not flexible enough. So I tried updated it as below:

Breakpoint variables

As above code sample we can declare generic viewport as variables to use in our @mixin, but as this @mixin is very flexible and can accommodate any viewport, we can use any pixel width (no need to declare in variables) at any point in the project and doesn’t need to update in the @mixin.