The --watch Command5:10 with Guil Hernandez
The --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
You need to sign up for Treehouse in order to download course files.Sign up