1 00:00:00,460 --> 00:00:04,040 So, if you're just looking to get your feet wet with Sass or if you wanna work on 2 00:00:04,040 --> 00:00:08,280 a Sass project but don't wanna worry about managing all the files on your computer, 3 00:00:08,280 --> 00:00:12,750 luckily we already have Sass functionality all set up within Workspaces. 4 00:00:12,750 --> 00:00:17,110 So moving forward, we're going to be using Workspaces for our project. 5 00:00:17,110 --> 00:00:19,990 But you'll still have the option of downloading all the project files and 6 00:00:19,990 --> 00:00:23,060 working alongside using your favorite text editor. 7 00:00:23,060 --> 00:00:25,310 So I've created a new workspace, and 8 00:00:25,310 --> 00:00:28,200 this is where we're going to refactor our project. 9 00:00:28,200 --> 00:00:30,950 And you can simply launch the workspace associated with 10 00:00:30,950 --> 00:00:32,960 this video to follow along. 11 00:00:32,960 --> 00:00:38,270 So I'm going to take all the files inside our lake-tahoe project folder. 12 00:00:38,270 --> 00:00:40,290 So I'm gonna select all of them and 13 00:00:40,290 --> 00:00:44,780 I'm going to drag them over to the left sidebar in Workspaces. 14 00:00:44,780 --> 00:00:49,110 And what this does is it uploads our project files to the current workspace. 15 00:00:49,110 --> 00:00:51,850 All right, so all our files are up. 16 00:00:51,850 --> 00:00:56,570 And if we preview our project, we can see that everything still looks good, and 17 00:00:56,570 --> 00:00:59,230 it's working just like it was on our desktop. 18 00:00:59,230 --> 00:01:00,560 Great. 19 00:01:00,560 --> 00:01:04,870 So, in the workspace console here, the watch command 20 00:01:04,870 --> 00:01:09,890 works exactly the same way it did earlier in terminal or your command prompt. 21 00:01:09,890 --> 00:01:14,720 So, to have Sass begin watching our project and compiling to CSS, 22 00:01:14,720 --> 00:01:19,612 down here in the workspace console, we'll need to type the command sass 23 00:01:19,612 --> 00:01:24,420 --watch scss:css. 24 00:01:24,420 --> 00:01:26,000 Then hit Enter. 25 00:01:26,000 --> 00:01:28,240 And as we're working on our project, 26 00:01:28,240 --> 00:01:32,660 you'll also notice this sass-cache folder that appears. 27 00:01:32,660 --> 00:01:34,100 So what is this? 28 00:01:34,100 --> 00:01:37,680 Well, this is just an extra folder Sass creates on its own 29 00:01:37,680 --> 00:01:42,010 to speed up the compiling of Sass to CSS by caching parts of your Sass code. 30 00:01:42,010 --> 00:01:43,290 So now that we know what it is, 31 00:01:43,290 --> 00:01:45,720 we don't really need to mess with it moving forward. 32 00:01:45,720 --> 00:01:48,550 In fact, we can delete it and it's not really a big deal. 33 00:01:48,550 --> 00:01:51,030 So I'm just gonna leave it in our project. 34 00:01:51,030 --> 00:01:55,970 Okay, so let's run a quick test to see if everything's compiling correctly. 35 00:01:55,970 --> 00:02:01,270 It's important to remember that at this point, we shouldn't edit our output CSS. 36 00:02:01,270 --> 00:02:05,620 So we'll go over to the scss directory and 37 00:02:05,620 --> 00:02:08,990 bring up the style.scss file. 38 00:02:08,990 --> 00:02:11,950 So let's just scroll down and change one of the styles. 39 00:02:11,950 --> 00:02:16,390 So for example, I'm going to add a red background color to the body. 40 00:02:16,390 --> 00:02:24,100 So let's say background: red, and let's save and compile our Sass file. 41 00:02:24,100 --> 00:02:26,500 And we'll refresh the browser. 42 00:02:26,500 --> 00:02:29,750 And yep, [LAUGH] there's the red background body color. 43 00:02:29,750 --> 00:02:32,630 All right, so that means that everything's good. 44 00:02:32,630 --> 00:02:36,530 Now, before we move on, let's set our background color back to normal. 45 00:02:36,530 --> 00:02:44,290 So I'm just gonna undo that, save and compile, refresh, and there we go. 46 00:02:44,290 --> 00:02:49,278 So now we've officially converted our project over to Sass, and if we wanted to, 47 00:02:49,278 --> 00:02:52,988 we can leave our Sass project alone and call it a day, right? 48 00:02:52,988 --> 00:02:56,294 But let's not do that cuz then this course would be over and 49 00:02:56,294 --> 00:02:57,788 that would be kind of sad. 50 00:02:57,788 --> 00:03:02,758 But what we really wanna do next is take advantage of all of Sass' powerful 51 00:03:02,758 --> 00:03:03,580 features. 52 00:03:03,580 --> 00:03:06,650 Now that we have our Sass project all set up inside Workspaces, 53 00:03:06,650 --> 00:03:10,340 it's time to start refactoring our CSS with Sass. 54 00:03:10,340 --> 00:03:14,570 Up next is where we'll introduce the real power of Sass into our workflow, and 55 00:03:14,570 --> 00:03:18,110 we'll go over the steps we need to take to convert our existing style sheet 56 00:03:18,110 --> 00:03:18,810 over to Sass.