You learn that you can pass arguments to mixins to set values of properties.

And that the arguments must be defined in the same order parameters appear

in the mixin.

For instance, the roundy mixin requires arguments for with the high dimension and

border style.

So when including this mixin, we always need to pass a value for

each variable, otherwise, it will output an error message.

So what if for example you don't need border styles in one of your

rounded elements?

Well, if you remove the border arguments past a roundy,

you'll get an error that reads error mixin roundy is missing argument border.

Well, you could zero out the border properties by passing

none as the argument, or better yet give the border parameter

a default value of none, that way the border argument is optional.

Well, both of these approaches produce unnecessary CSS and output.

If you have a look at style.css,

you get to see that the roundy mixin will output border none.

Each time you omit the argument for border.

So Sass supports a no data type.

That let's you define optional mixin parameters while creating

unnecessary CSS outputs.

When you set a mixins parameter to null by default, the mixin will not output CSS for

that parameter unless you pass an argument for it in the include.

And the border parameter is a great example of where you can use null to avoid

outputting needless CSS.

So now even if you omit the argument for border from the rally include,

the full border declaration gets excluded from the output CSS.

And the only way it would compile border styles to CSS is

if you pass the mix in a border argument.

So if we save and have a look at output CSS, There it is.

In the previous video, you learned that a mixin with multiple arguments requires you

to pass the arguments in the same order the parameters are defined.

Well, it's common to create a mixin that accepts two, three or more argument.

Now, remembering the correct order can be tricky.

So Sass solves this by allowing you to name the arguments you pass to a mixin,

using what are called keyword arguments.

You specify a keyword argument by including the variable name before

the values.

For example, I can completely reverse round this order of arguments

without producing any errors by writing the border variable and

one of the border values and the damn variable before the dimension values.

The keywords let Sass know exactly which arguments you're passing so

it does not output any errors.

Now, it may seem like keyword arguments make your mixin includes lengthier,

but at least this way you don't have to remember the exact order of arguments.

In addition, it can make the mixin include sort of self documenting since

the parameter names clearly indicate what the values represent.

Now, this is just a simple example with two arguments.

Now, take a look at how key word arguments and null help you create larger mixins.

Our main content and card elements use flexbox for the layout,

both are flex containers so they set the contents for flexbox layout and

contains flex items, the actual element being laid out with flexbox..

Now, flexbox in an immensely helpful CSS layout approach, so

it's likely that I will define other flex containers on my site as I'm building it.

Perhaps, I'll extend the main navigation using flexbox or

I've used it to vertically align sections of the site.

So let's create a flex container mixin that outputs common of flexbox

properties used to define a flex container.

So over in the mixin's partial, I'll first add a comment for

the mixin that says, create a flex container.

Then define a new mixin named flexy.

Inside the mixin, let's write the common properties

of a flexy container like display, flex-direction,

flex-wrap, and justify-content.

So now, let's define the mixin parameters using variables.

I'll name the variable for the display value, disp, or D-I-S-P,

and assign it a default value of flex.

The most common display value used when creating a flex container.

Now, when working with multiple parameters,

I like to place each on a separate line to make the code easier to read.

Nex, create the variables dir for flex-direction,

then wrap for flex-wrap, and just for justified content.

Now, not all flex containers will require these three values so

make them optional parameters setting their default values to null.

By setting these to null, Sass will ignore them if no value is passed,

meaning the final CSS will be simpler and less cluttered.

To complete our mixin,

we'll set the property values to their respective variables.

So let's set the display to the display variable, flex-direction to dir,

flex-wrap to wrap and justify-content to the just variable.

All right, now we're ready to use our mixin.

Go ahead and open the containers partial located in the layout folder and let's

replace the flexbox properties defined in the main content rule with include flexy.

If we give the file save and refresh the browser,

you can see that the main containers layout is still being displayed

using flexbox because we set the display value to flex by default.

So now, the only argument we need to pass this particular flexy include is wrap,

which sets main contents flex-wrap value.

Flex-direction and justify-content will remain as null.

So let's try passing the value wrap as the flexbox argument.

And now, our flexbox layout is broken, yikes.

Well, remember Sass requires that you pass mixin arguments in the same order

the parameters are listed.

And if we have a look at our flexy mixin,

we can see that the first parameter variable in the list is disp for display.

So the value wrap is being assigned to

that variable overriding the default flex value.

As you can see, wrap is the third argument in the list of variables.

So instead of forcing you to pass redundant display and

flex-direction arguments only because they are listed before flexbox.

So for example, before wrap, we'll pass flex and null.

Well, Sass let's you use keyword arguments to

explicitly set just the values you need.

So we can omit all arguments listed before wrap and

just write the variable wrap before the value.

If we save this file and have a look at the output CSS, we can see that the mix

in outputs the display and flex-wrap properties only remain content.

Over in the card.scss partial, the card rule requires that you set

flex-direction to column, so let's replace its flex container properties.

With @include flexy,

Passing in the keyword argument dir for flex-direction in the value column.

Once we save this and have a look at the output CSS, you can see that it

outputs only the display and flex-direction properties for card.

So when passing multiple arguments,

keyword arguments make your code easier to read.

And they help you remember which argument you're referencing.