Bringing our Sass Project into Workspaces3:19 with Guil Hernandez
We already have Sass functionality all set up within Workspaces! In this video, we'll bring our Lake Tahoe project into Workspaces, then begin refactoring our CSS with Sass.
So, if you're just looking to get your feet wet with Sass or if you wanna work on 0:00 a Sass project but don't wanna worry about managing all the files on your computer, 0:04 luckily we already have Sass functionality all set up within Workspaces. 0:08 So moving forward, we're going to be using Workspaces for our project. 0:12 But you'll still have the option of downloading all the project files and 0:17 working alongside using your favorite text editor. 0:19 So I've created a new workspace, and 0:23 this is where we're going to refactor our project. 0:25 And you can simply launch the workspace associated with 0:28 this video to follow along. 0:30 So I'm going to take all the files inside our lake-tahoe project folder. 0:32 So I'm gonna select all of them and 0:38 I'm going to drag them over to the left sidebar in Workspaces. 0:40 And what this does is it uploads our project files to the current workspace. 0:44 All right, so all our files are up. 0:49 And if we preview our project, we can see that everything still looks good, and 0:51 it's working just like it was on our desktop. 0:56 Great. 0:59 So, in the workspace console here, the watch command 1:00 works exactly the same way it did earlier in terminal or your command prompt. 1:04 So, to have Sass begin watching our project and compiling to CSS, 1:09 down here in the workspace console, we'll need to type the command sass 1:14 --watch scss:css. 1:19 Then hit Enter. 1:24 And as we're working on our project, 1:26 you'll also notice this sass-cache folder that appears. 1:28 So what is this? 1:32 Well, this is just an extra folder Sass creates on its own 1:34 to speed up the compiling of Sass to CSS by caching parts of your Sass code. 1:37 So now that we know what it is, 1:42 we don't really need to mess with it moving forward. 1:43 In fact, we can delete it and it's not really a big deal. 1:45 So I'm just gonna leave it in our project. 1:48 Okay, so let's run a quick test to see if everything's compiling correctly. 1:51 It's important to remember that at this point, we shouldn't edit our output CSS. 1:55 So we'll go over to the scss directory and 2:01 bring up the style.scss file. 2:05 So let's just scroll down and change one of the styles. 2:08 So for example, I'm going to add a red background color to the body. 2:11 So let's say background: red, and let's save and compile our Sass file. 2:16 And we'll refresh the browser. 2:24 And yep, [LAUGH] there's the red background body color. 2:26 All right, so that means that everything's good. 2:29 Now, before we move on, let's set our background color back to normal. 2:32 So I'm just gonna undo that, save and compile, refresh, and there we go. 2:36 So now we've officially converted our project over to Sass, and if we wanted to, 2:44 we can leave our Sass project alone and call it a day, right? 2:49 But let's not do that cuz then this course would be over and 2:52 that would be kind of sad. 2:56 But what we really wanna do next is take advantage of all of Sass' powerful 2:57 features. 3:02 Now that we have our Sass project all set up inside Workspaces, 3:03 it's time to start refactoring our CSS with Sass. 3:06 Up next is where we'll introduce the real power of Sass into our workflow, and 3:10 we'll go over the steps we need to take to convert our existing style sheet 3:14 over to Sass. 3:18
You need to sign up for Treehouse in order to download course files.Sign up