blog

SASS mixins are amazing, and helps to reuse so much code. However, when it comes to styled components there is no official way for mixins. There are many approaches online to handle this but none of them were as flexible as SASS mixins.
&nbsp;
So I decided to find my own way to achieve mixins.

A responsive mixin in SASS would look like this:

And it could be used like this:

Essentially, Styled Components is basically ES6 template literals, so we can create our own functions and those functions could be used inside Styled Components.

The following code would also work, but it won&rsquo;t be able to use props inside the css code:

In order to make the props work, we had to pass Styled Component&rsquo;s css function inside our function.

If you know how Styled Components work, then this will be no brainer for you. But I would like to explain the behind the scenes.
&nbsp;
You can pass parameters to a functions via Template literals:

So our functions like md and sm are also being used inside styled components the same way:

Let me know guys, what do you think about this approach.
Don&rsquo;t forget to clap if you it helped you <img title="slightly smiling face" src="https://paper.dropboxstatic.com/static/img/ace/emoji/1f642.png?version=3.1.2" alt="slightly smiling face" height="16" data-emoji-ch="🙂" />&nbsp;
&nbsp;
Cheers!

Stay on the radar