Preview
Video Player
00:00
00:00
The --watch Command
5:10The --watch command tells Sass to watch our project for changes, and it’s what automatically converts our Sass files into CSS. In this video, we’ll go over a simple --watch command, what it means, and how to overcome possible errors.
At some point in the past, you may have
installed SASS, created a SASS file,
0:00
opened up terminal and attempted a few
watch commands,
0:03
then everything came to a halt.
0:06
[SOUND].
0:07
Then you start getting weird errors in the
console.
0:08
Or you notice your SASS is compiling to
the wrong directory but
0:10
can't figure out why.
0:13
Yeah, this can be frustrating but
0:14
don't let it discourage you from crossing
over to the wonderful world of SASS.
0:16
So, up next.
0:20
We'll go over a simple watch command, what
it means, and
0:21
how to overcome possible errors.
0:23
As I mentioned in the previous video.
0:27
In our SASS project,
0:29
we'll only need to worry about the style
sheets inside the SCSS directory.
0:30
Because all the SASS code we write goes
here.
0:35
And SASS will automatically output a CSS
file for
0:38
the browser inside the CSS directory.
0:42
So to do that, we'll need to get the Sass
compiler running and watching our project.
0:46
And we can do that with the watch command.
0:51
Now the watch command literally tells SASS
to watch our project for changes.
0:54
And it's what automatically converts our
SASS files into CSS.
0:59
So to tell SASS to watch our project,
1:03
we'll first need to make sure that we're
inside the right working directory.
1:06
So back in the command prompt, or terminal
window, we'll need to type cd,
1:10
which tells your computer to change
directories,
1:16
followed by the path to our project
folder.
1:19
So we're going to type.
1:22
Desktop, forward slash, and the name of
our project folder, which is lake-tahoe.
1:23
And once we hit enter,
1:30
this brings us to the root of our
project's working directory.
1:31
Usually to keep our project nice and
organized, it's best to have our SASS and
1:35
CSS files in separate directories, like
we've done here.
1:39
So now we can tell SASS to just watch our
SASS directory,
1:44
and update our CSS directory.
1:49
So once my project is all set up, I like
to use the command sass
1:52
--watch scss:css.
1:57
Now this command is telling SASS, watch
all the files in the scss directory for
2:04
changes, then update the style sheet
inside the CSS directory.
2:09
So once we hit enter, if the watch command
succeeds,
2:14
you should see a notification like this in
the command line output.
2:18
It should say, sass is watching for
changes, press control C to stop.
2:22
Cool.
2:26
Now if we get an error, it's probably
because we've typed the wrong directory.
2:27
So, for instance, if we instead typed the
command sass
2:32
watch sass to CSS.
2:37
Once we hit enter we see that we get a no
such file or
2:42
directory error in the console.
2:47
So let's go ahead and type the correct
command once again.
2:49
So we'll say, sass --watch scss, colon
css.
2:51
And we may also see this write script here
in green in the console output.
2:58
This is telling us that Sass automatically
generated a style sheet
3:03
named style.css in the CSS directory.
3:07
And if we open up our project folder.
3:11
And take a look inside the CSS directory.
3:14
We can see how it did in fact create the
style sheet
3:16
that will contain our output CSS.
3:20
And it also created a CSS map, which we'll
get to in a later lesson.
3:22
So remember, we don't even have to create
3:28
the CSS directory because the watch
command will generate them for us.
3:30
So, for example.
3:34
Let's go back to the counsel and
3:36
tell sass to stop watching our project by
typing control c,
3:37
then back inside the project folder let's
actually delete the css folder.
3:42
Altogether.
3:48
So now back in the console we'll re-type
the watch command.
3:50
So let's say, sass watch scss:css.
3:54
And if we take a look at our project
folder, once again we can see how
4:01
it auto-generates the CSS directory, the
style sheet and the CSS map.
4:06
Cool.
4:11
And if we go back and take a look at our
site in the browser, and refresh.
4:12
Hey, all of our styles are back.
4:15
[BLANK_AUDIO].
4:17
Even though nothing in the syntax changed,
all the styles
4:21
written inside style.scss compiled over to
our css file.
4:26
Because, as we learned earlier,.
4:31
Any plain CSS written in our Sass file is
also valid Sass.
4:33
So now that Sass is watching our project
for all changes,
4:39
we don't really need to go back to the
console for anything at the moment.
4:42
You can actually just set it aside, but
make sure not to close it
4:45
because that will stop the whole watch and
compiling process.
4:49
There are also a few task runners and
4:53
tools that can automate this process for
us.
4:55
So take a look at the teacher's notes for
more information on those.
4:58
So now that our installation and local
setup are done, it won't take long to pick
5:01
up the SASS syntax and start seeing the
value of using SASS.
5:06