The good news is that getting SASS support working in a Create React App project is incredibly simple! We first need to install it via yarn, or npm first. We've used yarn for everything else so we'll stick to it:

$ yarn add node-sass

We'll see a ton of output from it, but assuming there are no errors and everything goes well, we should be able to restart our development server and get started with some SASS. Let's create a more general utility SASS file that will be responsible for storing standardized colors that we'll want to use throughout our application, and something to store that neat gradient hr pattern in case we want to use it elsewhere.

We'll also change some of the colors that we're using so that there is some red, green, and blue, depending on whether the item is critical, done, or neither, respectively. In addition, we'll need to change up our project a little bit and add a new file to have a concept of some shared styles and colors. So, let's begin:

1. Create a new file, src/shared.scss, in our project and give it the following body:

$todo-critical: #f5a5a5;
$todo-normal: #a5a5f5;
$todo-complete: #a5f5a5;
$fancy-gradient: linear-gradient(
  to right,
  rgba(0, 0, 0, 0),
  rgba(0, 0, 0, 0.8),
  rgba(0, 0, 0, 0)
);

2. Next, hop over to src/Divider/Divider.css and rename the file to src/Divider/Divider.scss. Next, we'll change the reference to Divider.css in src/Divider/Divider.js, as follows:

import "./Divider.scss";

3. Now we'll need to change up the code in Divider.scss to import in our shared variables file and use a variable as part of it:

@import "../shared";

hr {
  border: 0;
  height: 1px;
  background-image: $fancy-gradient;
}

So, we import in our new shared SASS file in src/, and then the background-image value just references the $fancy-gradient variable that we created, which means we can now recreate that fancy gradient whenever we need to without having to rewrite it over and over!

4. Save and reload, and you should see that nothing major has changed!

This is a pretty good example of introducing SASS where it just replaces our standard CSS, but what about when we start to introduce CSS Modules?