There are a number of options. You can simply install the entire SCSS preprocessor locally. This is pretty rare that I ever have to do that myself. So I'm going to teach you different skills and knowledge that you'll need when you're using this in a real-world type of application. Usually, we would use some type of web framework whenever we need to implement SCSS. So if you have a Rails application you can follow along throughout the entire course doing the same exact styles because rails provides that precompilation process.

We are going to use CodePen for a few reasons. First, it doesn't require any setup. Also, it will run the same regardless of whether you are working on a PC or a Mac. The goal of this course is to provide you with a foundation that you can apply to any project, regardless of what language you are using.

You can either sign up for an account with CodePen, which I would recommend since it is free and it allows you to save your progress. Once you have decided which option, lets then go to create a new pen.

You will then be presented with a new project.

We are going to get rid of the javascript window. Everything that we are doing in this portion is in HTML & SCSS. The changes that we make here will be automatically rendered in the browser shown below our code boxes. Now there is a little change you have to make before it will automatically recognize the styles.

First, we need to click on the gear in the top left of the CSS box

Then we need to change our preprocessor to use SCSS

Once we make that change we will notice we now have syntax highlighting and it will pick up the difference between CSS and SCSS. It also changes the heading so we know we are working in SCSS now.

Now we are all set and ready to go.