Advanced Mixins in Styled-Components
Part-2: Nested Mixins and arguments
In Part-1 of the article, we covered some simple methods that enable us to emulate Sassy Mixins in React using the Styled-Components library. Here in Part-2, we will continue to explore real-world use-cases including mixins with arguments and nested ones too. What’s more, in the end, we will have a reusable structure that you can implement in all of your future projects.
In A Nutshell
In everyday work, we face a number of situations in which we need to copy the same variable value or a group of CSS styles into a myriad of files just to change a button’s colour or a font-size property. A legacy solution for these scenarios in most preprocessors is to define mixins and global — CSS variables to minimize copy/paste overhead. Alternatively, Styled-Components offers a more modern solution, and that is a combination of JavaScript Objects, Theming and Props.
How My Code Started:
I was developing my code and I had to repeat the @media responsive syntax for every single element I needed. A quick solution would be using Mixins in your preferred preprocessor. I tended to use Sass, so my example is using this handy library. you just need to import the file containing the code snippet into main.scss . Here is my mixin:
Simple enough, using my mixin called responsive, I break free from much of the code. Just @include the desired mixin and call it within your styles.
Moreover, you can define — CSS-variables to even further minimize the amount of repeated code for example.
The final version of our mixin looks pretty neat and clean. But we still can improve our code using style components nested mixins. Here is the edited version using variables.
We managed to separate the logic and values from our mixins and declare them in an isolated _variables.scss file. We treat our mixin almost like a function, we pass it some arguments and it returns the final CSS code with properly placed values. Let’s take a tour of what’s available to us to tackle this scenario in Styled-Components.
How My Code Changed:
Now that we reviewed Mixins in Sass, we can jump into the features that styled-components presents to us. Obviously, in Sassy Mixins we still need to type some fixed syntax every single time we need that code snippet. other than @include, we have to remember the exact styles for all viewport widths and different devices. In our CSS-in-JS version of the code, we can solve this issue with a whole new approach.
It’s fun and handy, Let’s have a look,
To Dear Builders:
Please take into consideration, this article was written with junior developers in mind, and it is generally intended for coders who have just started using styled-components in React. Naturally, all the examples are highly simplified. To get an in-depth understanding about CSS-in-JS, enjoy reading this great tutorial from Tim Smith.
Code Example:
I would like to improve the previous version of my code to a new level. Since styled-components allows us to write CSS code inside our JS files, it unlocks the power of backticks and placeholders! using the dollar sign ($) and curly braces you can write valid javascript inside your CSS. This important feature enables us to define nested js objects and significantly increase our development speed. Here are my new mixins:
Now we can import our mixin in the component’s styles file and see its power in action.
Our code now appears to be more scalable since its logic is completely separate from the values and can be easily modified without friction. The only repeating part seems to be @media syntax that can be avoided using arguments. So we need to improve our mixins.js file to include responsive design as well, it’s super easy, just like this:
Up Until Here:
We managed to define our responsive mixin. I know it may sound a bit complicated, but let’s explore its moving parts. First of all, we defined a nested js object called “responsive”. inside this object, we have a ‘mobile’ key, and it has its own nested objects, inside ‘mobile’, we have a ‘standard’ key which is a function receiving some arguments and returning them wrapped in the CSS-helper from styled-components.
Next Step:
Now that we have our responsive mixin ready to use, we just need to implement it in our styles. Let’s do that,
Voila!!! We Successfully finished the task, and now we have our code fully functioning using our Styled-Component mixin. Obviously, it is much more readable, scalable, and unbelievably easier to maintain in development mode.
All In All,
We converted our Sass mixin to a nested JavaScript object, and using CSS-helper from styled-components, we managed to implement it in our React component’s styles. This method presents us with infinite opportunities to structure our repeated codes. You can create multiple mixin files — personally, I prefer to use this method😊- and store the most needed styles and values such as fonts, colours, borders, and suchlike. React’s architecture is totally in line with this method since it puts a bold emphasis on components isolation and using this versatile structure you will be fully enjoying the ultimate power of React 🚀
🎁 Code Repo
As always, you can find all the sample codes on my GitHub account and enjoy them for free. To contact me, simply visit Vegeloper.com
Resources:
