Sometimes you'll want one selector to share the styles of another selector.

SaaS has an extend directive that works similarly to mixins in

that you're able to share snippets of code across your stylesheets.

Extend is a useful directive for

sharing sets of related properties that get repeated in your stylesheets.

Button sets, for example, share many of the same CSS properties.

When you launch the latest workspace with this video, in the component styles,

you'll see that the btn-callout and btn-info rules share many of the same

styles for color, display, font-weight, text-decoration, and a few others.

Writing these properties over and over again for every button is incredibly

tedious and repetitive and could become a maintenance nightmare.

So in plain CSS, you might create a button class that

abstracts all the base styles of a button for example.

Then below, you'll define different modifier classes, like .btn-callout,

font-size: 1.1em, background-color: $color-secondary.

Then .btn-info with just the font-size, background-color, and

margin-top decorations.

Then over in your HTML, you give your button element or

a tag the base button class and the one modifier class, for btn-callout.

Well, this works fine and it's a much drier approach than the first example.

And you might also group all the button selectors that share the same styles,

for example you'll group .btn-callout with .btn-info and

one rule and have all the variations in separate rules.

Doing this requires just one class on your btn element,

which makes your HTML more maintainable.

That looks good.

Well there's an even easier way with extend.

So let's bring back our button class and our style sheet.

The extend directive will allow other selectors like .btn-callout and

.btn-info to inherit the properties of button.

So inside each button modifier rule,

let's add @extend followed by the class

we want to extend, in this case btn.

I'll copy the directive from .btn-callout and paste it inside .btn-info.

So here extend is instructing SaaS, hey SaaS I want .btn

to share its styles with btn-callout and btn-info.

Save your SaaS file and you'll see that the output is just like the CSS

we wrote earlier, the extend directive,

group the selectors that share the same styles into one rule, and

place the selector-specific styles in separate rules.

So in other words, all the base styles defined

here in the button rule are now applied to .btn-callout and .btn-info.

Whereas the include directive you learned about earlier clones the code

inside of mixin and duplicates it in the CSS output over and over again.

Extend makes the output more compact

by grouping the selectors that share the same properties.

But we can make our output even simpler.

Notice how extend outputs the button class in the selector group.

Well, we're no longer going to use this class by itself.

Because moving forward, we'll style once we're using just the named space classes.

So let's not have it clutter our CSS.

In the next video, I'll teach you how to make it disappear from the output

with a place holder selector.

I also included more example of extending selector in the teacher's notes.