1 00:00:00,500 --> 00:00:03,779 At some point in the past, you may have installed SASS, created a SASS file, 2 00:00:03,779 --> 00:00:06,150 opened up terminal and attempted a few watch commands, 3 00:00:06,150 --> 00:00:07,524 then everything came to a halt. 4 00:00:07,524 --> 00:00:08,116 [SOUND]. 5 00:00:08,116 --> 00:00:10,680 Then you start getting weird errors in the console. 6 00:00:10,680 --> 00:00:13,270 Or you notice your SASS is compiling to the wrong directory but 7 00:00:13,270 --> 00:00:14,840 can't figure out why. 8 00:00:14,840 --> 00:00:16,360 Yeah, this can be frustrating but 9 00:00:16,360 --> 00:00:20,140 don't let it discourage you from crossing over to the wonderful world of SASS. 10 00:00:20,140 --> 00:00:21,050 So, up next. 11 00:00:21,050 --> 00:00:23,780 We'll go over a simple watch command, what it means, and 12 00:00:23,780 --> 00:00:25,500 how to overcome possible errors. 13 00:00:27,050 --> 00:00:29,060 As I mentioned in the previous video. 14 00:00:29,060 --> 00:00:30,310 In our SASS project, 15 00:00:30,310 --> 00:00:35,570 we'll only need to worry about the style sheets inside the SCSS directory. 16 00:00:35,570 --> 00:00:38,910 Because all the SASS code we write goes here. 17 00:00:38,910 --> 00:00:42,380 And SASS will automatically output a CSS file for 18 00:00:42,380 --> 00:00:45,620 the browser inside the CSS directory. 19 00:00:46,760 --> 00:00:51,670 So to do that, we'll need to get the Sass compiler running and watching our project. 20 00:00:51,670 --> 00:00:54,120 And we can do that with the watch command. 21 00:00:54,120 --> 00:00:59,370 Now the watch command literally tells SASS to watch our project for changes. 22 00:00:59,370 --> 00:01:03,930 And it's what automatically converts our SASS files into CSS. 23 00:01:03,930 --> 00:01:06,220 So to tell SASS to watch our project, 24 00:01:06,220 --> 00:01:10,540 we'll first need to make sure that we're inside the right working directory. 25 00:01:10,540 --> 00:01:16,320 So back in the command prompt, or terminal window, we'll need to type cd, 26 00:01:16,320 --> 00:01:19,580 which tells your computer to change directories, 27 00:01:19,580 --> 00:01:22,250 followed by the path to our project folder. 28 00:01:22,250 --> 00:01:23,338 So we're going to type. 29 00:01:23,338 --> 00:01:30,050 Desktop, forward slash, and the name of our project folder, which is lake-tahoe. 30 00:01:30,050 --> 00:01:31,470 And once we hit enter, 31 00:01:31,470 --> 00:01:35,150 this brings us to the root of our project's working directory. 32 00:01:35,150 --> 00:01:39,650 Usually to keep our project nice and organized, it's best to have our SASS and 33 00:01:39,650 --> 00:01:44,180 CSS files in separate directories, like we've done here. 34 00:01:44,180 --> 00:01:49,230 So now we can tell SASS to just watch our SASS directory, 35 00:01:49,230 --> 00:01:52,600 and update our CSS directory. 36 00:01:52,600 --> 00:01:57,703 So once my project is all set up, I like to use the command sass 37 00:01:57,703 --> 00:02:04,450 --watch scss:css. 38 00:02:04,450 --> 00:02:09,430 Now this command is telling SASS, watch all the files in the scss directory for 39 00:02:09,430 --> 00:02:14,760 changes, then update the style sheet inside the CSS directory. 40 00:02:14,760 --> 00:02:18,910 So once we hit enter, if the watch command succeeds, 41 00:02:18,910 --> 00:02:22,230 you should see a notification like this in the command line output. 42 00:02:22,230 --> 00:02:26,740 It should say, sass is watching for changes, press control C to stop. 43 00:02:26,740 --> 00:02:27,780 Cool. 44 00:02:27,780 --> 00:02:32,190 Now if we get an error, it's probably because we've typed the wrong directory. 45 00:02:32,190 --> 00:02:36,490 So, for instance, if we instead typed the command sass 46 00:02:37,640 --> 00:02:41,010 watch sass to CSS. 47 00:02:42,930 --> 00:02:47,160 Once we hit enter we see that we get a no such file or 48 00:02:47,160 --> 00:02:49,360 directory error in the console. 49 00:02:49,360 --> 00:02:51,560 So let's go ahead and type the correct command once again. 50 00:02:51,560 --> 00:02:56,890 So we'll say, sass --watch scss, colon css. 51 00:02:58,790 --> 00:03:03,240 And we may also see this write script here in green in the console output. 52 00:03:03,240 --> 00:03:07,760 This is telling us that Sass automatically generated a style sheet 53 00:03:07,760 --> 00:03:11,260 named style.css in the CSS directory. 54 00:03:11,260 --> 00:03:14,040 And if we open up our project folder. 55 00:03:14,040 --> 00:03:16,750 And take a look inside the CSS directory. 56 00:03:16,750 --> 00:03:20,640 We can see how it did in fact create the style sheet 57 00:03:20,640 --> 00:03:22,820 that will contain our output CSS. 58 00:03:22,820 --> 00:03:28,070 And it also created a CSS map, which we'll get to in a later lesson. 59 00:03:28,070 --> 00:03:30,700 So remember, we don't even have to create 60 00:03:30,700 --> 00:03:34,580 the CSS directory because the watch command will generate them for us. 61 00:03:34,580 --> 00:03:36,140 So, for example. 62 00:03:36,140 --> 00:03:37,650 Let's go back to the counsel and 63 00:03:37,650 --> 00:03:42,085 tell sass to stop watching our project by typing control c, 64 00:03:42,085 --> 00:03:48,165 then back inside the project folder let's actually delete the css folder. 65 00:03:48,165 --> 00:03:48,765 Altogether. 66 00:03:50,895 --> 00:03:54,125 So now back in the console we'll re-type the watch command. 67 00:03:54,125 --> 00:04:01,485 So let's say, sass watch scss:css. 68 00:04:01,485 --> 00:04:06,525 And if we take a look at our project folder, once again we can see how 69 00:04:06,525 --> 00:04:11,625 it auto-generates the CSS directory, the style sheet and the CSS map. 70 00:04:11,625 --> 00:04:12,660 Cool. 71 00:04:12,660 --> 00:04:15,810 And if we go back and take a look at our site in the browser, and refresh. 72 00:04:15,810 --> 00:04:17,818 Hey, all of our styles are back. 73 00:04:17,818 --> 00:04:21,539 [BLANK_AUDIO]. 74 00:04:21,539 --> 00:04:26,398 Even though nothing in the syntax changed, all the styles 75 00:04:26,398 --> 00:04:31,790 written inside style.scss compiled over to our css file. 76 00:04:31,790 --> 00:04:33,730 Because, as we learned earlier,. 77 00:04:33,730 --> 00:04:39,130 Any plain CSS written in our Sass file is also valid Sass. 78 00:04:39,130 --> 00:04:42,390 So now that Sass is watching our project for all changes, 79 00:04:42,390 --> 00:04:45,960 we don't really need to go back to the console for anything at the moment. 80 00:04:45,960 --> 00:04:49,710 You can actually just set it aside, but make sure not to close it 81 00:04:49,710 --> 00:04:53,290 because that will stop the whole watch and compiling process. 82 00:04:53,290 --> 00:04:55,310 There are also a few task runners and 83 00:04:55,310 --> 00:04:58,220 tools that can automate this process for us. 84 00:04:58,220 --> 00:05:01,960 So take a look at the teacher's notes for more information on those. 85 00:05:01,960 --> 00:05:06,230 So now that our installation and local setup are done, it won't take long to pick 86 00:05:06,230 --> 00:05:09,995 up the SASS syntax and start seeing the value of using SASS.