Placeholder Selectors10:59 with Guil Hernandez
Next, we'll find repeating patterns in our code and extract them into placeholder selectors.
So next, we'll need to find repeating patterns in our code and 0:00 extract them into placeholder selectors. 0:04 That way, we can reuse bits of code without creating extra output. 0:06 Now, what's great about placeholder selectors is that they do not 0:10 compile to CSS unless they're extended or called up in another rule. 0:14 And when they do output to CSS, 0:19 the result is one grouped selector rule containing the shared styles. 0:21 So because of that, placeholders or 0:26 extends, as they're sometimes called, are a smart solution for 0:28 sharing styles between related rule sets, particularly base styles. 0:31 So when working with placeholder selectors, I'll usually create an extends 0:37 partial inside each of the folders and create all the related placeholders there. 0:42 So that keeps everything a little closer together, right? 0:47 But in this case, we're only going to extend rules in our layout styles. 0:50 So inside our layout directory, let's create a new file. 0:54 So I'm going to select it, right-click the folder, and say New File. 0:57 And we're going to name it _extends.scss. 1:02 So first up, most of our layout containers like the header, footer, and 1:10 content areas share the same text-align: center style. 1:14 Now, this might be a good time to create what I call a helper or 1:19 utility placeholder rule we can use on our project. 1:22 So let's go back to our new extends partial and 1:26 let's create our first placeholder. 1:30 And it's good to add comments explaining what's in the file, so 1:32 I'm going to add a comment that says Center text. 1:35 And let's create a new placeholder rule by typing a percentage sign, 1:40 and let's call it centered. 1:46 And we'll open up a set of square brackets. 1:48 So now let's go back to our containers partial, and let's cut out this 1:51 text-align: center declaration, and let's remove this group rule altogether. 1:56 And I'll save it. 2:02 Go back to extends.scss. 2:03 And we'll paste the text and 2:06 line declaration inside our centered placeholder rule. 2:07 All right, so now we can extend this placeholder and 2:11 some of our layout rules, and it will always inherit this style. 2:14 So let's go back to our containers partial. 2:18 And let's scroll down to our primary-content rule. 2:21 And as our first declaration, let's say @extend and 2:25 the name of our placeholder, which is %centered followed by a semicolon. 2:31 All right, so let's copy the extend we just wrote and 2:38 let's save our containers partial. 2:42 I'm going to close it out for now. 2:44 And let's open up our header partial and include the extend here as well. 2:46 So again, as the first declaration in our main header rule, let's go ahead and 2:52 paste in the extend directive. 2:56 So I'll save, close it out, and finally, 3:00 we also need to include it in our footer component. 3:02 So let's open up the footer partial, and 3:04 up top, paste in our extend. 3:09 All right. 3:12 So let's save it, and close it out. 3:12 So when using placeholders, we need to be careful which rules are declarations we 3:16 extend because extending a lot of these single declarations 3:20 can also make things a little difficult to maintain, 3:25 especially if we're just sort of plugging these into random rules. 3:28 So sometimes it's okay to repeat a little to keep the code maintainable. 3:31 Now, in this case, I'm using this as a utility rule since, as we just saw, 3:36 a few of our layout components need to be center-aligned. 3:40 But we should also avoid building entire sections of our site using a bunch of 3:43 single disparate extends]. 3:47 So, back in our style.scss partial, let's scroll up, 3:50 and here we see another repeating style we're using for creating top borders. 3:55 So we created this style as a sort of reusable rule. 3:59 So in our Sass project, it makes sense to turn this into a placeholder helper rule. 4:03 So I'm gonna go ahead and cut out the border top declaration, and 4:08 I'm going to delete the t-border rule. 4:13 And let's actually delete these stray comments here and 4:16 we'll go back to our extends partial. 4:20 And right below the one we just wrote, 4:22 let's create another comment that says Top border. 4:25 And let's create a placeholder called t-border for top border, 4:29 and inside the placeholder rule, I will paste in that border top declaration. 4:35 All right, now just like with our centered placeholder, 4:40 we can extend t-border wherever necessary. 4:44 So for instance, I'm going to copy the placeholder name and 4:47 let's go inside our container partial. 4:51 And in the primary-content rules, since the primary-content container 4:55 has a top border, we're going to @extend the t-border placeholder, 5:00 and we're gonna do the same in our secondary-content rules. 5:05 Let me go ahead and copy this declaration and 5:09 paste it as the first declaration in our secondary-content rule. 5:12 All right, so next when we scroll up, notice how our primary and 5:20 secondary-content containers also share these base styles. 5:25 Now, it might be okay to keep these grouped in one rule, 5:30 like we have here, but let's create a placeholder rules for these. 5:33 And these can function as base styles for any layout container we may add later on. 5:37 So, I'm gonna go ahead and select all the declarations inside this first rule. 5:43 Cut them out. 5:47 Now we can go ahead and delete this top rule. 5:48 And back in our extends partial right below the t-border placeholder, 5:53 let's create one more. 5:58 And we're gonna call this Containers. 6:00 [BLANK_AUDIO] 6:02 And let's call our placeholder content. 6:05 So we're going to say %content, a set of curly braces. 6:08 Then inside, paste in those declarations. 6:13 All right, so now we can extend this placeholder inside the primary and 6:17 secondary-content rules. 6:20 So let me just go ahead and copy this for later. 6:22 I will save our extend partial and go back to our containers partial. 6:24 So first, inside the primary-content rule, we're going to say @extend content, 6:29 and we'll do the same thing right below in our secondary-content rule. 6:36 [BLANK_AUDIO] 6:42 All right, so now we can kind of do the same thing for our columns. 6:46 So if we open up the columns partial, we can actually cut down the lines of CSS by 6:48 creating a placeholder for the shared column styles. 6:53 All right, so let's first cut out the width declaration in our first rule and 6:57 delete it. 7:02 And back in our extends.scss partial, we'll create another one for our columns. 7:04 And we're gonna call this one Columns. 7:13 So let's say %columns, and 7:14 let's paste in that width declaration. 7:18 All right, so now we can go back to our columns partial and 7:23 extend the placeholder. 7:27 So we'll say @extend columns and we'll do the same thing below in our resorts rule. 7:29 All right. 7:39 So we're all set with our columns, so we can close out our file. 7:39 And finally, let's create one more helper rule for our Float Clearfix. 7:42 So in our style.scss partial, I'm going to select and 7:48 cut the Float Clearfix out of here. 7:52 And let's go back to our extends file and 7:57 right below columns, let's add a comment for Clearfix. 8:00 And this time, I'm going to do things a little differently. 8:06 So I'm going to create a placeholder, like we've been doing, 8:08 and we're gonna name it clearfix. 8:11 But this time, inside I'm going to paste in that clearfix rule. 8:14 And instead of using the group class in the pseudo element selector here, 8:19 I'm going to replace group with an ampersand. 8:25 And what this does is it references the parent selector in a rule. 8:29 So now, instead of going into our HTML and adding the class group every time we need 8:34 to clear float, we can now extend the clearfix placeholder wherever necessary. 8:38 So for example, if we open up our index.html file and 8:45 scroll down, we can see that the secondary-content 8:48 container needs a clearfix because it has the class group. 8:51 So now we can go back to our partial file. 8:55 So let's open up the containers partial and 8:58 extend that clearfix placeholder inside the secondary-content rule. 9:00 So right beneath the t-border extend, 9:05 let's say @extend clearfix;. 9:10 And now we can actually go back to our HTML file and 9:14 make sure all the necessary classes have been removed from the markup. 9:18 So for instance, we can now get rid of the group class, and 9:21 we can also get rid of this t-border class since we extended it. 9:25 And if we scroll up to the primary-content div, 9:30 we can see that it's also using this t-border class. 9:33 So now we can actually delete it since we're extending it inside 9:37 the primary-content rule. 9:41 So before we move on, you may have noticed the error in the console, 9:44 and this is telling us that Sass can't find those placeholders we just declared. 9:47 Well, that's because we still haven't imported 9:52 our extends placeholder inside our index partial. 9:55 So in our index partial, let's go ahead and import that extend partial. 9:59 So I just go ahead and copy one of these, and I will paste it in as the last import. 10:03 That way, we avoid specificity issues later on. 10:09 And then we're going to define the new partial name. 10:13 So let's type extends. 10:16 And it looks like we're still getting an error in the console, and 10:20 that's probably because we still need to save our extends file. 10:23 And there we go. 10:27 Everything looks good. 10:28 So if we go back to our browser and 10:29 refresh, all our styles are back to normal. 10:31 And we get our nice, clean-looking website again in the browser. 10:35 So, as we just saw, placeholder selectors are one of the most 10:40 useful features when refactoring with Sass. 10:43 But if we're not careful about how we use them, 10:46 we can accidentally extend unintended code and bloat our CSS output. 10:49 So I've posted a related video on this in the teacher's notes, 10:54 so make sure to check that out. 10:57
You need to sign up for Treehouse in order to download course files.Sign up