Finishing and Importing our Partials6:17 with Guil Hernandez
In this video, we'll finish up our component partials, then see how we can make importing all project partials more manageable.
So now there are a few more container rules we need to add. 0:00 So let's go back to our partial, and let's scroll down and 0:03 grab the primary content rule here. 0:08 This grouped rule and the two rules below. 0:11 So let's go ahead and select these. 0:15 Cut them, and I'm going to paste them right beneath the first rule. 0:18 [BLANK_AUDIO] 0:23 All right. 0:28 So, now we can go ahead and save our containers partial and close it out. 0:28 And finally, let's move inside our components directory. 0:32 And this is where we're going to add the styles for 0:36 our site's standalone components or modules. 0:39 These are the smaller reusable parts of our sites like buttons, 0:42 icons, typography and so forth. 0:45 So, first let's open up our button's partial and backinstyle.sccs. 0:48 Let's go ahead and grab this call-out rule here, and call it a button. 0:54 So let's cut it out and paste it inside the buttons partial. 0:59 I'll save it close out and open up icons. 1:05 And for icons we're gonna grab the arrow rule. 1:08 So these are the styles to our arrow image. 1:12 So cut it out and paste it inside the icons partial. 1:14 And I'll save and close. 1:19 And finally, let's open up our typography partial and 1:22 this will contain all of the typography styles in our page. 1:25 So back over in style.scss. 1:30 Let's scroll up and grab the intro rule, the main title rule, and 1:34 the main heading rule. 1:38 And we'll also want the web fonts. 1:39 So let's select everything beginning from the webfonts 1:40 [BLANK_AUDIO] 1:43 All the way down to the intro rule. 1:45 And I'll cut that out and paste it inside our typography partial. 1:48 I'll go ahead and remove this comment. 1:56 Clean things up a little bit. 1:59 And now, I'll just save and close it out. 2:01 All right. 2:05 So it looks like we have everything in the right place. 2:06 And we'll get back to these remaining styles in just a bit. 2:09 So, as you can see, the goal is to keep partial files small and readable. 2:13 So now, if you're wondering about these index.scss 2:20 partials inside each of the directories. 2:24 Well, I'm actually using these files to import 2:29 the partial files from each directory into one file. 2:32 So, here's an example of one of them which is importing the base partial. 2:35 The components index is importing all the partials in the components directory. 2:39 And the same with our index partial inside the layout directory. 2:45 So now instead of importing every single partial inside our 2:51 global application style sheet. 2:55 We only need to import the single index reference 2:58 from each directory into application.scss. 3:01 So this makes everything a lot more manageable. 3:06 So now nothing is compiling to plain CSS just yet. 3:09 In fact, if we preview our project, 3:12 we can see that all of the styles in our page are gone. 3:14 But no worry, because what we need to do next is go back to application.scss. 3:18 So this is our global Sass file. 3:24 And we're going to use Sass' import directive to sort of 3:28 type all the files into this one style sheet. 3:31 Which will be great for 3:33 the browser because it will only require one request to the server. 3:34 All right, so let me go ahead and open one of these index files. 3:40 And let me copy this comment file and paste it inside our application.scss file. 3:42 And let me just change the comment to say Global Imports. 3:50 So it's important to note that when importing partial files, 3:57 the order in which we import them is important. 4:01 Since it does affect the cascade in the final output. 4:04 So we need to follow our original CSS order as close as possible. 4:07 So first, we're going to import all the base styles, 4:12 let's type at import, then a set of quotes followed by a semicolon. 4:15 And inside the quotes we're going to define the path 4:21 to the index partial inside the base directory. 4:25 So let's say base/index. 4:28 I'll just go ahead and copy this. 4:32 Paste two of them, right below. 4:34 And the next one will be for our layout styles. 4:36 And finally, our components. 4:40 [BLANK_AUDIO] 4:42 So as we can see want the base styles first, 4:44 then the layout styles followed by the components. 4:47 So now when we save and compile all our Sass and 4:50 go back to the browser and refresh. 4:54 We can see how Sass brings our styles back again. 4:58 And it actually outputs all the partials we just created into our main style sheet. 5:01 So if I open up application.css there's all our compiled css. 5:07 And actually since we did change our 5:12 style sheet name from style.css to application.css. 5:15 We can actually remove the old reference to style.css. 5:18 So let me select the style.css map file, right-click, Delete. 5:21 Then I'll select style.css, right-click, and Delete. 5:27 We no longer need those since we're now using application.css. 5:30 And that's all coming from the application.scss global file. 5:34 All right? 5:39 So it looks like we're good to go. 5:40 So this is a suggested way of organizing your partial files and 5:42 you can do things a little differently if you'd like. 5:46 Now even if we don't use any of these Sass syntax, which we haven't yet. 5:48 You can see that at the very least it helps keep our project organized and 5:51 easily maintainable. 5:56 So again, we could maybe stop here and say, 5:57 well okay we have our Sass project all done, so let's call it a day. 6:01 But there's still lots more we can do to optimize our CSS 6:04 even with the most basic Sass features. 6:08 So soon, we'll see how variables, mixins, placeholders and 6:11 nesting can really speed up our workflow. 6:14
You need to sign up for Treehouse in order to download course files.Sign up