Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Like functions, mixins also accept parameters. This makes mixins even more powerful and flexible styling tools!
Resources
[MUSIC]
0:00
Earlier when you learned about mixins,
0:04
you wrote all the necessary properties and
values inside the mixin itself.
0:06
For example, the skewed and
0:11
center mixins copy over these exact
declarations wherever they're included.
0:13
But mixins don't have to use the same
values each time they're included.
0:18
Like functions,
mixins also accept parameters,
0:22
making them even more powerful and
flexible styling tools.
0:25
For example, the center mixin has
a predefined width value of 90%.
0:28
What if you wanna center another
element but set its width to 50%?
0:33
Well you could omit the width
declaration from the mixin and
0:37
define the width via
the content directive.
0:41
But there's a better way.
0:43
You can make mixins smarter and
extensible with parameters.
0:45
So let's have the center mixin accept
the variable w for width as a parameter.
0:49
Now, replace the set width
value with the w variable.
0:56
So now when including the center mixin, we
can specify any width value as an argument
1:02
and it will assign it
to the width property.
1:07
Open the containers partial
located inside the layout folder.
1:10
And in the main content rule,
let's pass center the value 90%.
1:15
Now, this was a simple example
of the power of mixin arguments.
1:26
Now let's create a more complex mixin.
1:30
The featured image rule in our
components images partial uses width,
1:35
border, and border-radius properties
to create a rounded image.
1:41
Now I really like this effect, so it's
likely that I'll use it in other places
1:45
like author bios,
thumbnail images, or icon borders.
1:49
So let's convert this set of CSS
declarations into a dynamic mixin.
1:53
At the bottom of the mixins partial,
I'll add the comment Rounded elements.
1:58
And below it,
I'll create a new mixin named roundy.
2:07
The mixin will accept a parameter
that applies width and
2:15
height dimensions, so let's name
this variable dim for dimensions.
2:18
And inside the mixin, we'll add width and
height properties and
2:24
set their values to the variable dim.
2:28
Then we'll add the magic ingredient
in perfectly rounded elements,
2:35
a border radius of 50%.
2:39
I'll give this file a save.
2:43
And now in the images partial,
you can replace the width and
2:46
border-radius declarations.
2:50
With our new roundy mixin
by typing include roundy,
2:52
passing at the argument 165px.
2:58
And perfect, now we can reuse our
handy roundy mixin wherever we
3:06
wanna display rounded elements.
3:11
While we're at it, let's also add the
border declarations to the roundy mixin.
3:13
That way we can define the border-radius
and border styles all in one place.
3:18
So we'll go back and have roundy, except
a second parameter named border or brdr.
3:22
Then in the mixin, add a border property
and set the value to our border variable.
3:29
Now the border CSS shorthand
property accepts anywhere from
3:38
one to three values for setting
the border width, style, and color.
3:43
So back in the image featured rule,
3:47
we'll pass roundy the set of
border values as one argument.
3:49
So just go ahead and cut them from
the border declaration below it.
3:52
Delete the border property and pass it to
the roundy mixin as a second argument.
3:56
Keep in mind that a mixin with two or
more parameters like roundy,
4:01
requires that you pass the arguments in
the same order you defined the parameters.
4:05
Otherwise, the code will produce errors.
4:11
When working with mixins that
accept just two arguments
4:13
remembering the order is simple.
4:16
But if you're using a mixin that
accepts multiple arguments,
4:18
getting the order right can be tricky.
4:21
So in the next video, I'll teach you a
clever and organized way to pass arguments
4:22
to mixins using keyword arguments and
the null data type.
4:26
You need to sign up for Treehouse in order to download course files.
Sign up