Up and Running with Sass2:59 with Guil Hernandez
Now that we've installed or updated Sass, let's set up a local Sass project.
So, now that we've installed or updated Sass, let's set up a local Sass project. 0:00 And like I said earlier, we're going to use the Lake Tahoe website we built 0:05 in the CSS Basics course and convert it over to Sass. 0:09 And you'll find the latest project files in the download section of each page. 0:13 So, here's the project folder on our desktop. 0:17 And when we open it up, we can see that it consists of an HTML file, 0:20 a regular style sheet, some images, and a few fonts. 0:25 Now, if you haven't seen what the project looks like just yet, once I bring it up, 0:30 we can see exactly what it looks like. 0:34 It's a simple one-page website for the city of Lake Tahoe. 0:36 [BLANK_AUDIO] 0:40 So, back in our project folder, 0:43 what we'll need first is a folder where we can store our Sass files. 0:45 So, let's create a new folder and we're going to name it scss. 0:50 Now, we could also name the folder Sass, but 0:57 since we're going to be using the most commonly used SCSS or 1:01 sassy CSS syntax, let's name it scss. 1:06 Next, if you think we'll need to throw away our main style sheet and 1:10 start all over again with Sass, well, good news. 1:14 We don't have to do that. 1:17 Let's actually move the style.css file from 1:19 the css folder over to the new scss folder. 1:24 So now we no longer need to worry about the CSS files in the css folder, 1:28 Sass will take care of that for us. 1:33 So the first big step in converting a project over to Sass is renaming the main 1:36 style sheet. 1:41 Now, we can name it style.sass, or style.scss. 1:42 But again, since we're going to be using the CSS-friendly SCSS syntax, 1:47 we'll rename our style sheet style.scss. 1:55 So next, I'm just gonna take a look at our project in Sublime Text 2. 2:00 And great. 2:05 Now we have the beginnings of a Sass project happening here. 2:06 And if we wanted to, we could keep writing plain old CSS here in the style sheet, and 2:10 everything in the style sheet would be valid Sass. 2:15 But as you'll soon see, 2:18 learning the nuances of the SCSS syntax is definitely worth it. 2:20 And it doesn't take long to learn either. 2:24 It's a one time cost that will pay off in the end because we'll be able to make all 2:26 this code here way more efficient, maintainable, 2:30 and easier to read and manage. 2:33 So nothing's really happening in our project just yet. 2:37 In fact, if you take a look at our website again in the browser and 2:40 refresh, all our styles are gone. 2:43 Well, don't worry, we didn't break anything. 2:46 Now we just need to tell Sass to watch our project for changes, and 2:49 tell it how and where to compile our Sass to CSS. 2:53 We'll learn how that works coming up next. 2:56
You need to sign up for Treehouse in order to download course files.Sign up