1 00:00:00,180 --> 00:00:04,250 Earlier, you learned that the Sass preprocessor takes a Sass file and 2 00:00:04,250 --> 00:00:07,550 translates it into plain CSS the browser can read. 3 00:00:07,550 --> 00:00:11,200 One of the quickest and most direct ways to make this happen is in the terminal or 4 00:00:11,200 --> 00:00:13,040 console, using the command line. 5 00:00:13,040 --> 00:00:14,840 Now, if you've never used the command line, 6 00:00:14,840 --> 00:00:17,810 don't worry, you don't need to be an expert with the command line to use sass. 7 00:00:17,810 --> 00:00:20,600 In this video I'll teach you a couple of friendly commands to get 8 00:00:20,600 --> 00:00:22,400 sass running quickly. 9 00:00:22,400 --> 00:00:23,600 Sass works like this. 10 00:00:23,600 --> 00:00:27,830 You put sass input into the compiler and get CSS output on the other side. 11 00:00:27,830 --> 00:00:31,050 The sass command tells the compiler which files to process. 12 00:00:31,050 --> 00:00:33,860 While the sass command accepts many different bits of information, 13 00:00:33,860 --> 00:00:37,010 at the very least, you need to provide it the path to the input file, and 14 00:00:37,010 --> 00:00:39,190 the path to the output file. 15 00:00:39,190 --> 00:00:41,260 To get started, we need a sass file. 16 00:00:41,260 --> 00:00:46,044 We'll use the file input.scss since we're going to be writing SCSS syntax in 17 00:00:46,044 --> 00:00:46,922 this course. 18 00:00:46,922 --> 00:00:49,541 You can delete input.sass from your files. 19 00:00:52,051 --> 00:00:55,899 Now over in the console, type the command sass, followed by a space, and 20 00:00:55,899 --> 00:00:57,720 the name of your sass file. 21 00:00:57,720 --> 00:01:00,090 In our case, it's input.scss. 22 00:01:00,090 --> 00:01:04,090 Then we'll need to specify the output CSS file. 23 00:01:04,090 --> 00:01:06,820 If you haven't created a CSS file at this point that's okay. 24 00:01:06,820 --> 00:01:08,890 The sass command will generate one for you. 25 00:01:08,890 --> 00:01:12,010 Let's name the output file, output.css. 26 00:01:12,010 --> 00:01:14,000 Run the command by pressing Enter. 27 00:01:14,000 --> 00:01:16,624 And once you refresh the side bar and workspaces by Ctrl or 28 00:01:16,624 --> 00:01:20,280 right-clicking the side bar and clicking Refresh, 29 00:01:20,280 --> 00:01:24,750 you'll see that sass created a new folder and a couple of new files. 30 00:01:24,750 --> 00:01:28,980 The only file we're concerned with right now is output.css. 31 00:01:28,980 --> 00:01:32,030 Open up the file, and you'll see that it contains plain CSS. 32 00:01:32,030 --> 00:01:36,265 This is a file you link to your HTML. 33 00:01:38,647 --> 00:01:42,390 You should never edit the output.css file. 34 00:01:42,390 --> 00:01:45,780 This file is created by sass, and you shouldn't work directly in the file. 35 00:01:45,780 --> 00:01:49,670 You should only edit the .scss files. 36 00:01:49,670 --> 00:01:55,333 Right now the output.css doesn't look much different than input.scss, because 37 00:01:55,333 --> 00:02:00,447 as I mentioned in the previous video, you can add plain CSS to any SCSS file. 38 00:02:00,447 --> 00:02:05,193 However, we'll soon be using sass specific features like variables, mixins and 39 00:02:05,193 --> 00:02:08,189 nesting, using sass syntax that isn't valid CSS. 40 00:02:08,189 --> 00:02:12,190 At that point you'll see how sass is translated into plain CSS. 41 00:02:12,190 --> 00:02:16,520 Sass also generated a new file named output.css.map. 42 00:02:16,520 --> 00:02:18,770 You won't need to write too much about this file right now. 43 00:02:18,770 --> 00:02:21,920 Sass created this file to make our lives a little easier, if and 44 00:02:21,920 --> 00:02:25,405 when we have to debug styles in the browser using a tool like Chrome DevTools. 45 00:02:25,405 --> 00:02:27,500 You'll learn more about that in a later video. 46 00:02:27,500 --> 00:02:33,160 Also, sass creates these sass-cache holder to speed up the compiling of sass to CSS, 47 00:02:33,160 --> 00:02:35,380 by caching parts of our sass code. 48 00:02:35,380 --> 00:02:38,220 You'll usually leave this folder alone, and you won't need it for 49 00:02:38,220 --> 00:02:40,560 this course since our sass files will be small. 50 00:02:40,560 --> 00:02:43,940 In fact, you can delete the folder from your project without a problem. 51 00:02:46,270 --> 00:02:51,880 Running the command sass input.scss output.css 52 00:02:51,880 --> 00:02:56,140 every time you make a change to the input file is extremely tedious, right? 53 00:02:56,140 --> 00:02:59,440 Fortunately, sass comes with a built in feature called a watcher, 54 00:02:59,440 --> 00:03:02,660 that constantly detects changes made to your input file. 55 00:03:02,660 --> 00:03:07,300 So anytime you save a change in your sass files, the watcher automatically 56 00:03:07,300 --> 00:03:11,250 recompiles it, and overwrites the output.css with the latest changes. 57 00:03:13,070 --> 00:03:17,789 To enable the watcher, you pass the watch option to the sass command, like so. 58 00:03:17,789 --> 00:03:22,941 Sass --watch followed 59 00:03:22,941 --> 00:03:28,820 input.scss:output.css. 60 00:03:28,820 --> 00:03:32,580 After running the command, you should see the message, Sass is watching for changes. 61 00:03:32,580 --> 00:03:35,550 Press Ctrl-C to stop in your console output. 62 00:03:35,550 --> 00:03:41,880 Great, now any time you add a new code or make a change to your sass file, 63 00:03:41,880 --> 00:03:45,070 simply save the changes and you should see the console output, 64 00:03:45,070 --> 00:03:49,580 Change detected to input.scss write output.css. 65 00:03:49,580 --> 00:03:54,340 This means that your changes were successfully written to output.css. 66 00:03:54,340 --> 00:03:58,370 Now when you need to stop running the watcher press Ctrl+C. 67 00:03:58,370 --> 00:04:00,190 When you preview the workspace in the browser, 68 00:04:00,190 --> 00:04:03,530 you'll see the beginnings of the virtual reality blog we're going to be building 69 00:04:03,530 --> 00:04:06,620 this course using the awesome features of sass. 70 00:04:06,620 --> 00:04:09,102 And when you're all finished, it's going to look like this. 71 00:04:12,569 --> 00:04:13,892 See you in the next video.