Mix-ins are amazing, for getting dynamic results in repeatable CSS rules.

Functions are fantastic, for getting all that logic out of the way so

you can focus on the rules.

But, what about, when you simply want to repeat rules,

without having to duplicate them.

This is where selector inheritance, or extends, come into play.

Extending CSS rules has been around for a very, very long time.

This is not a new concept invented by Sass, but

one that was made much easier to accomplish with Sass.

But there are trap doors and potential pitfalls when using extends.

One of them being selector puke.

Let's explore, some of these and

talk about how to best use extends and avoid puking, all over your CSS.

>> Aside from functions and mix ins, the next big thing,

that's being used when you're trying to dry up your code.

Is the add extend directive or selector inheritance.

So, starting with this example that we have here.

So I have an h1 that's defined, I have an h2 that's defined and

then I also have a selector called .large-copy.

So in order for large-copy to take advantage of any of these things,

I could use @extend h1, right.

And we look at our compiled CSS to the right we see h1 and

large-copy share the exact same rules, and then h2 is still sitting here by itself.

'Kay, so now lets say that I wanted to do

something interesting like a text transform.

So I'm gonna put that text transform inside of my h1, so

[SOUND] text-transform and then, uppercase.

All right, perfect.

But I want that text-transform to be used by my h2, right?

So I'm gonna come down here and I'm gonna say @extend h1.

Okay.

Now we look at our output over here.

So we have h1 and h2, and large-copy all using the same three rules.

And then my h2, is using the font size.

And basically by using.

Inheritance in the cascade, so the h2 is being set to a 3.

3 em, but the h2 down here is being redefined to that two, 'kay?

So we can totally do this.

And this, this looks great.

I mean, what could possibly go wrong?

So, moving on with life, and we get further down into doing some stuff.

So I'm gonna create a selector called foo, right, and then.

This is gonna have a, you know, say a border of 1px solid red, right?

Give me a little bit more room here.

But then, and this is all looking great so far, so but then nested in here I'm gonna

have an h1, and then in this h1, I'm gonna say color white.

Okay, so, what's interesting to note, is that I have my h1,

h2, large-copy rules, my h2 rules, my foo roos, fool, foo rules.

Now I have this foo h1, foo h2,

foo and large-copy has all been turned to color white.

Why did that happen, 'kay?

And the reason this happened is because the way extends work.

I mean, extends is going to loop through everything and

it's gonna look for every possible match.

And it's basically because, you know, in this, over here in this example.

That, you know, I extended such a,

you know, a vanilla based HTML element, and we're gonna reuse this element again,

and again, and again to try to redefine styles throughout our designs.

So when I came in here, and did the h1 color white, Sass picked up on that with

the extend, and it looped through it and it thought it was an option that I wanted.

Hey, so this can really trip you up and this is one of the main reasons and

how people kinda end up with concepts like selector puke,

right Cuz all I did was foo h1, I wanted to be color white.

And then everything became color white and that's not what I wanted.

So, what I can do here to make this better and more you know.

More specific to the output that I'm looking for.

I wanna actually turn this h1 into what's called a placeholder selector.

Now a placeholder selector is much like a regular selector, except it's invisible,

until it's actually called into, another selector using the @extend directive.

So I'm gonna call this base-heading, 'kay?

So that's great.

Now what I need to do is I need to redefine my h1 again.

So I'm gonna say h1, and then I want @extend, base-heading.

Perfect.

So now I need to do the same thing down here again with this h2.

I don't wanna extend h1, I want to extend the base-heading.

Perfect.

Now, when I come down to here, extend, again, with the large-copy,

I don't wanna extend the h1, I want to extend the base-heading.

So, great.

So now if we looked at our output CSS here on the right, my h1, my h2 and

my large-copy all share those same rules,

of which I'm very specifically stating in the way this code is written.

My h2, it has its specific rules.

Foo has its specific rules.

And then now when we get down to foo h1,

since the h1 is not being the thing that's extended but it's actually the placeholder

that's been extended, the only rule being applied to foo h1 is color white.

So this is definitely a potential pitfall that you're gonna wanna look out for,

when you're working with extends.