We can even make this better, right?

So, let's go back and [SOUND] success.

Yeah we got success here primary?

So see how all that worked.

I'll get back to our blue button.

Here we go.

So, there's the original blue button that we we're working with.

So a quick refactor we can do with this tool is that say, I wanna do primary and

then success.

Right? And, [SOUND] so we have these two buttons,

but if we come back over here and

we make another button and we call this [SOUND] success.

Kay?

This works.

This is great.

This is good stuff.

But the problem that we have here is that we have all these rules for primary.

And then we have all these exact same rules for success.

So that is a lot of duplicated CSS for

no reason other than the pure sake of duplication.

So how we can make this better is I want to get this include

default-button out of here.

I'm gonna get rid of that guy.

Because we don't need that right now.

Now what I'm gonna do is that I'm going to create a placeholder selector.

[SOUND].

And in the placeholder selector here I'm going to create [SOUND] default-button.

And I'm gonna include that default-button there.

Then what I'm gonna do down here, is that inside of primary @extend default-button.

@extend default-button.

Put our semicolons in here, and then we have our buttons back.

So we have our green, we have our blue button.

And if we come over here and we look at our output CSS we see that primary and

success are reusing these rules.

And then primary success are only reusing, are only using the rules that need,

they need to use in order to make their individual things.

Okay.

So this is getting really awesome right now, but we can make it even better.

Okay? So getting back to

advanced color functions, we have four hex values here.

I don't wanna use four hex values.

I want, I wanna create all of these different things based off of

a single primary color.

So, we're just gonna use primary.

So success, warning, and alert are all gonna be derivatives of primary, right?

So one of the things that I can use is adjust hue.

Now adjust hue is another SASS color function.

And then what I can actually do is I'm going to take success here and I'm gonna

adjust the hue by 260 on the color wheel, and I'm gonna use that primary color.

All right?

So we have success and we're using success down there right here and

as we can see here you know, that's that same color green.

So then we can do the same thing with warning.

Now warning, let's just change that real quick.

[SOUND]. Okay.

So we have warning which is that orange.

So warning is warning is actually a combination of

a hue adjustment and saturation.

So to get this one in here, again, I'm chaining functions together and

I'm saying I want to adjust the hue of primary by 188 points on the color wheel,

but I wanna saturate it by 43.

Well, one too many.

And we get our final color again.

And again you know, this is the same orange we were working with before.

This is pretty awesome.

So let's use alert down here, so we have our alert red.

Now in order to get to that red again from our primary blue color,

what we are gonna use again is three color functions at the exact same time.

So, I'm going to adjust the hue of primary by 162 points on the color wheel.

I'm gonna saturate this by 12.

And I need, and I can have the ability to lighten it, as well.

So if I wanted just to make this a little bit lighter.

You know a little bit lighter.

You know, I have that ability to do that by chaining all of these things together.

So I, I like that one a little bit better, all right?

So, there you have it.

I mean, what's really cool here is I can come back in here [SOUND],

change that to purple.

Then, yeah of course purple's gonna get kind of weird, but

let's go back to maybe, red.

Woah, that's, that's a good one.

So, what we're showing here is that I can basically change one value here, and

then I can have that cascade down into all the different button

colors that are the different states for the buttons.

Then I can also generate, create a mixin which then at the point that

I'm calling in that mixin I can change the color of the button again on the fly.

And all the colors inside of that button be it, you know,

it's border, it's shadow, any type of highlights that we're putting on it.

All of these colors are generated on the fly just using SASS color functions.

And that's, is amazingly powerful to me.

Working with other designers, I asked them to help me in the definition of colors.

And not just give me the final hex value.

But what I'm really interested in is the process used in generating that color.

What is the application's core color palette.

When creating the new color I asked how did you get there.

If I can reproduce the how, versus just coding the end,

then we are way ahead of the game in changes coming down the road.