[MUSIC]

Earlier when you learned about mixins,

you wrote all the necessary properties and values inside the mixin itself.

For example, the skewed and

center mixins copy over these exact declarations wherever they're included.

But mixins don't have to use the same values each time they're included.

Like functions, mixins also accept parameters,

making them even more powerful and flexible styling tools.

For example, the center mixin has a predefined width value of 90%.

What if you wanna center another element but set its width to 50%?

Well you could omit the width declaration from the mixin and

define the width via the content directive.

But there's a better way.

You can make mixins smarter and extensible with parameters.

So let's have the center mixin accept the variable w for width as a parameter.

Now, replace the set width value with the w variable.

So now when including the center mixin, we can specify any width value as an argument

and it will assign it to the width property.

Open the containers partial located inside the layout folder.

And in the main content rule, let's pass center the value 90%.

Now, this was a simple example of the power of mixin arguments.

Now let's create a more complex mixin.

The featured image rule in our components images partial uses width,

border, and border-radius properties to create a rounded image.

Now I really like this effect, so it's likely that I'll use it in other places

like author bios, thumbnail images, or icon borders.

So let's convert this set of CSS declarations into a dynamic mixin.

At the bottom of the mixins partial, I'll add the comment Rounded elements.

And below it, I'll create a new mixin named roundy.

The mixin will accept a parameter that applies width and

height dimensions, so let's name this variable dim for dimensions.

And inside the mixin, we'll add width and height properties and

set their values to the variable dim.

Then we'll add the magic ingredient in perfectly rounded elements,

a border radius of 50%.

I'll give this file a save.

And now in the images partial, you can replace the width and

border-radius declarations.

With our new roundy mixin by typing include roundy,

passing at the argument 165px.

And perfect, now we can reuse our handy roundy mixin wherever we

wanna display rounded elements.

While we're at it, let's also add the border declarations to the roundy mixin.

That way we can define the border-radius and border styles all in one place.

So we'll go back and have roundy, except a second parameter named border or brdr.

Then in the mixin, add a border property and set the value to our border variable.

Now the border CSS shorthand property accepts anywhere from

one to three values for setting the border width, style, and color.

So back in the image featured rule,

we'll pass roundy the set of border values as one argument.

So just go ahead and cut them from the border declaration below it.

Delete the border property and pass it to the roundy mixin as a second argument.

Keep in mind that a mixin with two or more parameters like roundy,

requires that you pass the arguments in the same order you defined the parameters.

Otherwise, the code will produce errors.

When working with mixins that accept just two arguments

remembering the order is simple.

But if you're using a mixin that accepts multiple arguments,

getting the order right can be tricky.

So in the next video, I'll teach you a clever and organized way to pass arguments

to mixins using keyword arguments and the null data type.