Compiling 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