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