The precss plugin mentioned previously allows you to use Sass variables and mixins in your CSS code. While this may sound like a great feature, in practice, you may want to keep the usage of variables and (especially) mixins to the very minimum, in favor of a better composition of React components. This will keep your code more maintainable. There are some legit cases though where you need to have shared variables. For example, you may want to have the $primary-color variable containing the primary base color used by many UI elements in your app.

Let's create the components/variables.scss file for such variables. It may look similar to this:

/* Colors */ 
$color-primary: #0275d8; 
$color-success: #5cb85c; 
$color-info:    #5bc0de; 
$color-warning: #f0ad4e; 
$color-danger:  #d9534f; 
 
/* Shadows */ 
$shadow-2dp: 0 2px 2px 0 rgba(0, 0, 0, .14), 
             0 3px 1px -2px rgba(0, 0, 0, .2), 
             0 1px 5px 0 rgba(0, 0, 0, .12); 
 
...