Modern JavaScript Web Development Cookbook

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 ...