Extend Placeholder Selectors5:04 with Guil Hernandez
When you extend regular selectors, like classes and IDs, they get output to CSS. Sass has a special type of selector, called a placeholder selector, that won't appear in the CSS output unless extended.
In the previous video, we used the extend directive to instruct SaaS to share 0:00 the button styles with button callout and button info. 0:05 When you extend normal selectors like classes and 0:10 IDs, they'll always get output to CSS. 0:12 However, sometimes those selectors are never actually used 0:16 to style the elements of a page. 0:19 For example, we'll likely never use the button class directly in HTML. 0:20 So it's best to omit it from the output. 0:25 Now just one unused class is not that big a deal. 0:27 But if we extended multiple selectors, we could end up creating 0:30 lots of unnecessary CSS and bloat in the final output. 0:33 So SaaS has a special type of selector called a placeholder selector 0:37 that won't appear in the CSS output unless it's extended. 0:41 You create a placeholder selector by placing a percent sign 0:46 in front of the selector name. 0:49 So let's turn the button class selector into a placeholder 0:50 by replacing the period with a percent sign. 0:54 And we also need to change the extends to @extend %btn. 0:59 Placeholder selectors never get output to CSS unless extended from within a rules. 1:07 So if I quickly comment out the two extends [SOUND]. 1:12 And compile my changes, 1:17 you'll see the button rule completely disappear from the output. 1:19 The percent symbol makes it invisible. 1:23 Add the extends back in. 1:25 Now the button class is gone from the output. 1:28 And the selector group contains only the classes using the extend directive, 1:31 button call out and button info. 1:36 So this is one of the main reasons why developers often extend on 1:38 place holders instead of regular selectors. 1:41 It's considered a best practice in SaaS. 1:44 While we're at it let's bring back the nested button rules for call out and info. 1:47 So I'll create a rule using the class button 1:52 then nest the call out and info modifiers. 1:58 Replacing the button prefix with the ampersand symbol. 2:02 Place holder selectors are not only useful for simple base styles, 2:20 they're also useful for utility styles or sets of related properties that you'll 2:23 reuse in different places without creating extra output. 2:27 So for example, if you're building a float-based layout, you can 2:30 create a clearfixed place holder selector that clears your floats when extended. 2:33 Now, placeholders also support nested selectors. 2:40 So here I'll nest the &after pseudoelement selector with the usual 2:43 clearfix declarations. 2:48 And then we can extend the clearfix placeholder wherever you need to clear 2:50 floats. 2:54 Placeholders even share nested rules with other selectors. 2:57 And this can be useful with pseudo classes. 3:00 So for example we can define hover and active styles for 3:02 all buttons In one place. 3:05 So in the button placeholder rule, I'll nest the ampersand hover selector. 3:07 And inside the rule, let's set the color to the variable white. 3:15 And the opacity value to 0.8. 3:20 Then right below, I'll create another rule for 3:24 active, using &active. 3:29 And here I'll set the opacity value to initial. 3:37 This will output two sets of group selectors, one for 3:43 the shared hover styles and another for the active styles. 3:47 All right so now that you're getting the hang of extend it's good to know its 3:58 limitations and some of the ways over extending can produce undesirable effects 4:02 in your output if you're not careful. 4:06 So for example it's best to avoid extending from a group of 4:08 selectors like icon, card, call out, info, and so on. 4:15 So what this does is it will extend all occurences of each selector. 4:21 Now so you can see here in the output CSS this can quickly make the final 4:25 output messy. 4:29 But some, often, referred to this as selector explosion. 4:31 So keep your extends simple. 4:34 Now, it's okay to use the extend directive for 4:38 a simple button set like the one we created. 4:41 But if you find yourself extending a placeholder or 4:44 selector from multiple places in your style sheet. 4:47 It's best to use a mixin instead. 4:49 You can often achieve the same results to the mixin without creating 4:52 long awkward groupings of unrelated selectors in your output. 4:54 I posted links to resources and treehouse videos that help you best practices for 4:58 using extend in the teachers notes. 5:01
You need to sign up for Treehouse in order to download course files.Sign up