Breaking the Style Sheet into Partials7:35 with Guil Hernandez
Now we're going to see how Sass makes writing CSS more efficient and fits nicely into our workflow. The first step in refactoring CSS over to Sass is breaking related sections of code out into partial files.
[MUSIC] 0:00 Another common misconception we may have about Sass is that it adds more layers of 0:04 complexity into our workflow. 0:08 Well, now that most of the hard part is done and 0:11 we've converted our project from CSS over to a working Sass project. 0:13 We're gonna see how Sass really makes things easier for us and 0:17 doesn't disrupt anything about our workflow. 0:20 You see, a style sheet can turn into a maintenance nightmare, 0:23 if we're not careful. 0:26 And currently, our project's style sheet is one long list of rules. 0:27 And if we add more components to our website, 0:31 it can become difficult to maintain over time. 0:33 So now, we're going to restructure our style sheet using Sass, and 0:36 this process is called refactoring. 0:40 Refactoring a project style sheet with Sass is a gradual process, and 0:42 there are a few steps we need to take, so let's go over these steps. 0:46 First, we'll break related sections out into partial files. 0:50 Then, we'll find repeating patterns in our code and 0:53 extract them into extends or placeholder selectors. 0:56 After that, we'll look for areas where it makes sense to nest Sass rules. 1:00 Then, we'll clean up our code even more by creating variables for repetitive values. 1:04 And finally, we'll look for repeating declaration groups, or rule sets, and 1:09 turn them into mixins. 1:13 As we'll see, it's not complexity we're adding. 1:15 Just a little tidiness and efficiency. 1:17 So the first step in refactoring CSS over to Sass 1:20 is breaking related sections of code out into partial files. 1:23 Now as I mentioned in the previous stage, CSS can be kind of messy to deal with. 1:27 So a big advantage of working with Sass is how we're able to think about our project 1:32 modularly, then build and maintain it using a modular approach. 1:36 Now, to learn more about building a modular code base with Sass, 1:40 be sure to check out our modular CSS with Sass course, 1:44 which expands on many of the concepts we're about to cover. 1:48 So in our project, we're gonna break up, 1:51 our, main style sheet into small chunks, using Sass partials. 1:54 So in the latest work space, 1:59 you'll notice that I've created three folders inside our scss directory. 2:00 So here we have a directory named base, 2:05 below that, we have a directory named components, and one called layout. 2:08 And inside these three directories are some of the different partials 2:14 that will make up our styles. 2:17 If you haven't worked with Sass partials yet, a partial is a Sass file, 2:20 in our case an SCSS file, that has an underscore in front of the file name. 2:24 So with partials we can import a file into another file, 2:30 instead of compiling it as a separate CSS file. 2:34 And the underscore in the filename tells the Sass compiler, hey, don't compile this 2:37 file to CSS, just leave it alone unless we import it into our main Sass file. 2:42 Since we're going to be cutting code out of our old style sheet, 2:48 let's go ahead and make it a partial by changing the filename. 2:53 So I'm going to, right-click style.scss and click Rename and 2:57 we're going to change the name to _style.scss. 3:02 So this way, it won't compile to CSS. 3:07 Now, before we move on, let's tell Sass to watch our project for 3:11 changes by going down to the workspace console, 3:18 and writing the command sass --watch scss:css. 3:23 So, we're gonna keep our style.scss file as a partial moving forward only because, 3:28 like I said, we're going to be cutting code out of this file and 3:34 breaking it up into bits. 3:38 Then, we're actually going to delete it when we're finished. 3:40 So, what we need to do next is create a global SCSS file that will 3:44 import all of our partials then compile it to CSS. 3:49 So in the root of the scss folder, let's create a new file. 3:54 So I'm going to select the scss folder, right-click, 3:58 and, say New File, and we're going to name it application.scss, 4:03 so this will be the file that will output to CSS, and we'll get to this file later. 4:09 But now, we'll need to go over to our index.html file, and 4:17 change the file name of the style sheet being linked to 4:21 the document from style.css to application.css. 4:26 [BLANK_AUDIO] 4:30 So I'll just go ahead and save it and close it out. 4:32 Okay, so at this point, the only files that should be outside of our partial 4:36 directories are application.scss and the style.scss partial. 4:41 So now we can begin breaking out related sections of code 4:49 into their respective partials. 4:53 Now think of each partial as a small piece of the big puzzle. 4:55 And at first, 4:59 many of our SCSS files will only have plain CSS styles in them, and that's okay. 5:00 So first, we'll break out the base styles, and 5:06 these are all the rules that define what elements look like by default. 5:08 So we're gonna add all the element selectors in our CSS inside 5:12 this base.scss partial, located in the base directory. 5:16 So back in our style.scss partial, I'm actually going to select everything 5:21 beginning from this base style comment all the way down, to the links. 5:26 So right above the main styles, and I'm going to cut it out of our style sheet and 5:32 paste it inside the base.scss partial. 5:38 Now we can go ahead and save it. 5:43 All right, so let's close out our base partial and 5:45 let's open up our layout directory. 5:48 And in our layout rules, we're going to define layout styles for 5:50 the major sections of our page. 5:55 So for instance, the header, footer, containers and columns. 5:57 And as we can see, I've already created some partials for that. 6:01 So first, let's open up the header.scss partial. 6:05 And we'll go over to style.scss and let's scroll down. 6:08 And we're going to cut out the header rule from the style sheet and 6:13 paste it inside our header partial, so 6:18 now we can go ahead and save this, and close it out. 6:21 And then let's open up footer.scss and same thing. 6:25 We'll go over to style.scss and let's scroll down and 6:30 cut the main footer rule out of our style sheet and 6:34 paste it inside the footer partial, so I'll save it and we can close it out. 6:38 So next, let's open up the columns partial, and 6:45 back in style.scss under Layout Styles, 6:49 let's cut out the column section right here under the Floated Columns comment. 6:55 So I'm gonna cut out these three rules, and paste them inside our columns partial. 7:01 So I'll save and close it out for now, and finally, 7:08 let's open up the containers partial. 7:11 And this is what's gonna hold a lot of the containers in our page. 7:14 So, back in style.scss, let's go ahead and grab the wildlife container, 7:17 and the primary secondary content rule here. 7:23 So I'm just gonna select them, cut them out, 7:27 and paste them inside containers.scss. 7:30
You need to sign up for Treehouse in order to download course files.Sign up