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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up