How it works…

Let's try to recreate the button we build with SASS, but through using our new tool. We won't try to mimic the SASS code, but we'll try to apply some of the same concepts like defining constants in a separate file, having functions work as mixins, and extending a class as we did earlier. We have a problem, because styled-components doesn't provide color functions as SASS does, so we'll add a new library to take care of that, color:

This package provides you with lots of methods to create and manipulate colors, so you'll do well by taking a look at its documentation, at https://github.com/qix-/color.
npm install color --save

Now, we are set. First, we'll have some basic color constants, in file constants.js, that could be used ...

Get Modern JavaScript Web Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.