Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
The Sass preprocessor takes a Sass file and translates it into plain CSS the browser can read. In this video, you'll learn the commands to compile Sass to CSS.
Resources
-
0:00
Earlier, you learned that the Sass preprocessor takes a Sass file and
-
0:04
translates it into plain CSS the browser can read.
-
0:07
One of the quickest and most direct ways to make this happen is in the terminal or
-
0:11
console, using the command line.
-
0:13
Now, if you've never used the command line,
-
0:14
don't worry, you don't need to be an expert with the command line to use sass.
-
0:17
In this video I'll teach you a couple of friendly commands to get
-
0:20
sass running quickly.
-
0:22
Sass works like this.
-
0:23
You put sass input into the compiler and get CSS output on the other side.
-
0:27
The sass command tells the compiler which files to process.
-
0:31
While the sass command accepts many different bits of information,
-
0:33
at the very least, you need to provide it the path to the input file, and
-
0:37
the path to the output file.
-
0:39
To get started, we need a sass file.
-
0:41
We'll use the file input.scss since we're going to be writing SCSS syntax in
-
0:46
this course.
-
0:46
You can delete input.sass from your files.
-
0:52
Now over in the console, type the command sass, followed by a space, and
-
0:55
the name of your sass file.
-
0:57
In our case, it's input.scss.
-
1:00
Then we'll need to specify the output CSS file.
-
1:04
If you haven't created a CSS file at this point that's okay.
-
1:06
The sass command will generate one for you.
-
1:08
Let's name the output file, output.css.
-
1:12
Run the command by pressing Enter.
-
1:14
And once you refresh the side bar and workspaces by Ctrl or
-
1:16
right-clicking the side bar and clicking Refresh,
-
1:20
you'll see that sass created a new folder and a couple of new files.
-
1:24
The only file we're concerned with right now is output.css.
-
1:28
Open up the file, and you'll see that it contains plain CSS.
-
1:32
This is a file you link to your HTML.
-
1:38
You should never edit the output.css file.
-
1:42
This file is created by sass, and you shouldn't work directly in the file.
-
1:45
You should only edit the .scss files.
-
1:49
Right now the output.css doesn't look much different than input.scss, because
-
1:55
as I mentioned in the previous video, you can add plain CSS to any SCSS file.
-
2:00
However, we'll soon be using sass specific features like variables, mixins and
-
2:05
nesting, using sass syntax that isn't valid CSS.
-
2:08
At that point you'll see how sass is translated into plain CSS.
-
2:12
Sass also generated a new file named output.css.map.
-
2:16
You won't need to write too much about this file right now.
-
2:18
Sass created this file to make our lives a little easier, if and
-
2:21
when we have to debug styles in the browser using a tool like Chrome DevTools.
-
2:25
You'll learn more about that in a later video.
-
2:27
Also, sass creates these sass-cache holder to speed up the compiling of sass to CSS,
-
2:33
by caching parts of our sass code.
-
2:35
You'll usually leave this folder alone, and you won't need it for
-
2:38
this course since our sass files will be small.
-
2:40
In fact, you can delete the folder from your project without a problem.
-
2:46
Running the command sass input.scss output.css
-
2:51
every time you make a change to the input file is extremely tedious, right?
-
2:56
Fortunately, sass comes with a built in feature called a watcher,
-
2:59
that constantly detects changes made to your input file.
-
3:02
So anytime you save a change in your sass files, the watcher automatically
-
3:07
recompiles it, and overwrites the output.css with the latest changes.
-
3:13
To enable the watcher, you pass the watch option to the sass command, like so.
-
3:17
Sass --watch followed
-
3:22
input.scss:output.css.
-
3:28
After running the command, you should see the message, Sass is watching for changes.
-
3:32
Press Ctrl-C to stop in your console output.
-
3:35
Great, now any time you add a new code or make a change to your sass file,
-
3:41
simply save the changes and you should see the console output,
-
3:45
Change detected to input.scss write output.css.
-
3:49
This means that your changes were successfully written to output.css.
-
3:54
Now when you need to stop running the watcher press Ctrl+C.
-
3:58
When you preview the workspace in the browser,
-
4:00
you'll see the beginnings of the virtual reality blog we're going to be building
-
4:03
this course using the awesome features of sass.
-
4:06
And when you're all finished, it's going to look like this.
-
4:12
See you in the next video.
You need to sign up for Treehouse in order to download course files.
Sign up