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