Functions are awesome,

another place that they play a huge role is at when you're building mixins.

So all too often when we're building mixins we will start building a lot of

logic inside of that mixin.

Let's build an example of that.

So let's say we are building yet another grid system.

Yes.

[SOUND] IM says I will build grids.

So when I'm building a grid I'm gonna pass in.

I want my count argument, my context is 12.

I'm gonna set that as a default.

[SOUND] My width is 60.

Comma there.

And my gutter is going to be 20.

Alright. [NOISE].

Now what I want to do is I'm gonna create a variable called grid width,

and grid width is going to be be my count minus one,

which is going to be multiplied by my gutter and then that's gonna added to.

My count multiplied by width.

[SOUND] Hooh, 'Kay, now next I

need to determine a context width all right.

Context width is going to be.

[SOUND] Context multiplied

with plus gutter.

Now, I need to set my width.

All right.

And what I'm going to is I'm going to convert this into a percentage.

So there's already a SASS function I can use called percentage and

what I'm going to pass in here is grid-width

divided by context width.

So now you can see why I needed to create those other variables.

So I have a mixin of the grid and all I really need to pass in there to

get this thing to work is how many columns of a grid that I want.

Cuz it's already set in a context of 12.

The width, by default, is gonna be 16 and the gutter's gonna be 20.

So I need to set an overall grid width, and that's gonna be my count minus one,

times gutter, plus count, times width, right?

So that gives me a gross value.

And then context width is gonna be context times width plus gutter.

So that gives me my entire value.

And then in order for me to figure out what the actual width is of this,

of this particular use case, I need to find out what

the percentage of one thing is divided by another and come out with an, a value.

So if I were to come down here and I then I say, dot block.

And then I do at, include the grid, and then I say ten.

So then I get the width of 81.25 %, beautiful, right?

So this is, this is big.

This is kind of a lot of stuff happening within the space of a a single mixin.

So, it definitely would be preferable if we were to actually take these things out

of the mixin, and then just allow the mixin to be able to produce the rules, but

take out the logic and put those inside of functions.

So let's start dissecting this thing here.

So I'm gonna create @function.

And I'm gonna call this function grid-width, alright?

And then inside this is gonna be count, gutter and width.

Count, gutter and width, okay.

And what this is gonna do is that this is actually going to create this.

So my grid width count minus one gutter and count width.

So I'm actually gonna take this entire guy out of here.

Take that, [SOUND] do that, and then that.

Return grid width, perfect.

All right.

So now I'm gonna do the exact same thing for context width right?

So @function context-width.

And this is gonna take arguments of context width and gutter.

Okay.

Context and width and gutter.

[SOUND] Perfect.

And now I want to take out that context-width variable.

That is context times width, plus gutter, right?

So let's get this guy out.

[SOUND] And then, get my at

return statement in here [SOUND].

Perfect.

[SOUND] Okay.

Basically, we're gonna use what's inside of the mixin, and create the grid

width and grid context variables but we've removed all that unnecessary logic.

So what I want to create now is the [SOUND].

Grid, width.

And then, context width.

Kay.

And then, to get these to work, I'm going to, call on those functions.

So let's, grid width is going to be.

Read with.

And then I can basically you know,

pass those arguments from the mixin itself directly into the function.

So I want count, gutter, and width.

Alright.

Same thing with context width.

So I'm gonna call in the function context width.

Whoops, yes, that's what I wanted.

And I'm gonna, let's get a space in here.

There we go.

So context width is going to consume context.

[SOUND] Width and gutter.

And there we go, so

now we can see over here that our block still came back with 81.25%.

I can come in here, change that to oops, about five end of paren

39.583333% because of the use of gutter, so it's not going to be 50%.

Even if I, whoops!

There we go, 47.91667.

So that that accounts for the gutter within a 50% column.

So as we can see here you know,

this, I was able to make a mixin a lot easier to follow.

Because I didn't have you know,

you can, you can distill these things even down further and further and further.

But you can see that you know,

all I needed to do inside the mixin was create the variable.

So that I could use within line 15.

And putting all of that logic out into functions makes this easier to follow.

Easier to edit, and a lot more scalable in the long run.

>> Functions.

Would you have ever guessed that we would be thinking like this with CSS?

I sure didn't.

But now that I can, I can never walk away from this.

Regardless of aesthetics and emotion, designs are pattern-rich fields.

The more we can do with CSS and

not rely on pixel-dependent images, the more code we have to write.

The more code we have to write, the better we have to get at writing it.

Functions completely take the repetitive nature out of vanilla CSS and

allow us to really rethink on how we build our world.

You just have to get started.