Extend the Properties of Selectors

Sometimes you'll want one selector to share the styles of another selector. 0:00 SaaS has an extend directive that works similarly to mixins in 0:05 that you're able to share snippets of code across your stylesheets. 0:08 Extend is a useful directive for 0:11 sharing sets of related properties that get repeated in your stylesheets. 0:13 Button sets, for example, share many of the same CSS properties. 0:17 When you launch the latest workspace with this video, in the component styles, 0:22 you'll see that the btn-callout and btn-info rules share many of the same 0:27 styles for color, display, font-weight, text-decoration, and a few others. 0:32 Writing these properties over and over again for every button is incredibly 0:38 tedious and repetitive and could become a maintenance nightmare. 0:43 So in plain CSS, you might create a button class that 0:47 abstracts all the base styles of a button for example. 0:52 Then below, you'll define different modifier classes, like .btn-callout, 1:02 font-size: 1.1em, background-color: $color-secondary. 1:06 Then .btn-info with just the font-size, background-color, and 1:10 margin-top decorations. 1:15 Then over in your HTML, you give your button element or 1:17 a tag the base button class and the one modifier class, for btn-callout. 1:22 Well, this works fine and it's a much drier approach than the first example. 1:29 And you might also group all the button selectors that share the same styles, 1:35 for example you'll group .btn-callout with .btn-info and 1:42 one rule and have all the variations in separate rules. 1:47 Doing this requires just one class on your btn element, 1:52 which makes your HTML more maintainable. 1:56 That looks good. 2:05 Well there's an even easier way with extend. 2:07 So let's bring back our button class and our style sheet. 2:10 The extend directive will allow other selectors like .btn-callout and 2:16 .btn-info to inherit the properties of button. 2:20 So inside each button modifier rule, 2:24 let's add @extend followed by the class 2:29 we want to extend, in this case btn. 2:34 I'll copy the directive from .btn-callout and paste it inside .btn-info. 2:38 So here extend is instructing SaaS, hey SaaS I want .btn 2:45 to share its styles with btn-callout and btn-info. 2:50 Save your SaaS file and you'll see that the output is just like the CSS 2:55 we wrote earlier, the extend directive, 3:00 group the selectors that share the same styles into one rule, and 3:03 place the selector-specific styles in separate rules. 3:08 So in other words, all the base styles defined 3:12 here in the button rule are now applied to .btn-callout and .btn-info. 3:16 Whereas the include directive you learned about earlier clones the code 3:22 inside of mixin and duplicates it in the CSS output over and over again. 3:26 Extend makes the output more compact 3:31 by grouping the selectors that share the same properties. 3:34 But we can make our output even simpler. 3:37 Notice how extend outputs the button class in the selector group. 3:40 Well, we're no longer going to use this class by itself. 3:45 Because moving forward, we'll style once we're using just the named space classes. 3:48 So let's not have it clutter our CSS. 3:53 In the next video, I'll teach you how to make it disappear from the output 3:55 with a place holder selector. 3:58 I also included more example of extending selector in the teacher's notes. 4:00