Creating Powerful Mixins

[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