Earlier, you learned that the Sass preprocessor takes a Sass file and

translates it into plain CSS the browser can read.

One of the quickest and most direct ways to make this happen is in the terminal or

console, using the command line.

Now, if you've never used the command line,

don't worry, you don't need to be an expert with the command line to use sass.

In this video I'll teach you a couple of friendly commands to get

sass running quickly.

Sass works like this.

You put sass input into the compiler and get CSS output on the other side.

The sass command tells the compiler which files to process.

While the sass command accepts many different bits of information,

at the very least, you need to provide it the path to the input file, and

the path to the output file.

To get started, we need a sass file.

We'll use the file input.scss since we're going to be writing SCSS syntax in

this course.

You can delete input.sass from your files.

Now over in the console, type the command sass, followed by a space, and

the name of your sass file.

In our case, it's input.scss.

Then we'll need to specify the output CSS file.

If you haven't created a CSS file at this point that's okay.

The sass command will generate one for you.

Let's name the output file, output.css.

Run the command by pressing Enter.

And once you refresh the side bar and workspaces by Ctrl or

right-clicking the side bar and clicking Refresh,

you'll see that sass created a new folder and a couple of new files.

The only file we're concerned with right now is output.css.

Open up the file, and you'll see that it contains plain CSS.

This is a file you link to your HTML.

You should never edit the output.css file.

This file is created by sass, and you shouldn't work directly in the file.

You should only edit the .scss files.

Right now the output.css doesn't look much different than input.scss, because

as I mentioned in the previous video, you can add plain CSS to any SCSS file.

However, we'll soon be using sass specific features like variables, mixins and

nesting, using sass syntax that isn't valid CSS.

At that point you'll see how sass is translated into plain CSS.

Sass also generated a new file named output.css.map.

You won't need to write too much about this file right now.

Sass created this file to make our lives a little easier, if and

when we have to debug styles in the browser using a tool like Chrome DevTools.

You'll learn more about that in a later video.

Also, sass creates these sass-cache holder to speed up the compiling of sass to CSS,

by caching parts of our sass code.

You'll usually leave this folder alone, and you won't need it for

this course since our sass files will be small.

In fact, you can delete the folder from your project without a problem.

Running the command sass input.scss output.css

every time you make a change to the input file is extremely tedious, right?

Fortunately, sass comes with a built in feature called a watcher,

that constantly detects changes made to your input file.

So anytime you save a change in your sass files, the watcher automatically

recompiles it, and overwrites the output.css with the latest changes.

To enable the watcher, you pass the watch option to the sass command, like so.

Sass --watch followed

input.scss:output.css.

After running the command, you should see the message, Sass is watching for changes.

Press Ctrl-C to stop in your console output.

Great, now any time you add a new code or make a change to your sass file,

simply save the changes and you should see the console output,

Change detected to input.scss write output.css.

This means that your changes were successfully written to output.css.

Now when you need to stop running the watcher press Ctrl+C.

When you preview the workspace in the browser,

you'll see the beginnings of the virtual reality blog we're going to be building

this course using the awesome features of sass.

And when you're all finished, it's going to look like this.

See you in the next video.