Smarter Mixins with null and Keyword Arguments

You learn that you can pass arguments to mixins to set values of properties. 0:00 And that the arguments must be defined in the same order parameters appear 0:04 in the mixin. 0:08 For instance, the roundy mixin requires arguments for with the high dimension and 0:09 border style. 0:14 So when including this mixin, we always need to pass a value for 0:15 each variable, otherwise, it will output an error message. 0:20 So what if for example you don't need border styles in one of your 0:22 rounded elements? 0:25 Well, if you remove the border arguments past a roundy, 0:26 you'll get an error that reads error mixin roundy is missing argument border. 0:30 Well, you could zero out the border properties by passing 0:35 none as the argument, or better yet give the border parameter 0:39 a default value of none, that way the border argument is optional. 0:44 Well, both of these approaches produce unnecessary CSS and output. 0:49 If you have a look at style.css, 0:54 you get to see that the roundy mixin will output border none. 0:56 Each time you omit the argument for border. 1:01 So Sass supports a null data type. 1:05 That let's you define optional mixin parameters while creating 1:07 unnecessary CSS outputs. 1:11 When you set a mixins parameter to null by default, the mixin will not output CSS for 1:13 that parameter unless you pass an argument for it in the include. 1:18 And the border parameter is a great example of where you can use null to avoid 1:23 outputting needless CSS. 1:27 So now even if you omit the argument for border from the rally include, 1:30 the full border declaration gets excluded from the output CSS. 1:35 And the only way it would compile border styles to CSS is 1:39 if you pass the mix in a border argument. 1:44 So if we save and have a look at output CSS, There it is. 1:47 In the previous video, you learned that a mixin with multiple arguments requires you 1:52 to pass the arguments in the same order the parameters are defined. 1:56 Well, it's common to create a mixin that accepts two, three or more argument. 2:00 Now, remembering the correct order can be tricky. 2:03 So Sass solves this by allowing you to name the arguments you pass to a mixin, 2:05 using what are called keyword arguments. 2:09 You specify a keyword argument by including the variable name before 2:12 the values. 2:16 For example, I can completely reverse round this order of arguments 2:17 without producing any errors by writing the border variable and 2:22 one of the border values and the damn variable before the dimension values. 2:27 The keywords let Sass know exactly which arguments you're passing so 2:36 it does not output any errors. 2:41 Now, it may seem like keyword arguments make your mixin includes lengthier, 2:44 but at least this way you don't have to remember the exact order of arguments. 2:49 In addition, it can make the mixin include sort of self documenting since 2:53 the parameter names clearly indicate what the values represent. 2:57 Now, this is just a simple example with two arguments. 3:00 Now, take a look at how key word arguments and null help you create larger mixins. 3:04 Our main content and card elements use flexbox for the layout, 3:10 both are flex containers so they set the contents for flexbox layout and 3:16 contains flex items, the actual element being laid out with flexbox.. 3:22 Now, flexbox in an immensely helpful CSS layout approach, so 3:25 it's likely that I will define other flex containers on my site as I'm building it. 3:29 Perhaps, I'll extend the main navigation using flexbox or 3:33 I've used it to vertically align sections of the site. 3:36 So let's create a flex container mixin that outputs common of flexbox 3:38 properties used to define a flex container. 3:42 So over in the mixin's partial, I'll first add a comment for 3:44 the mixin that says, create a flex container. 3:49 Then define a new mixin named flexy. 3:55 Inside the mixin, let's write the common properties 4:01 of a flexy container like display, flex-direction, 4:06 flex-wrap, and justify-content. 4:14 So now, let's define the mixin parameters using variables. 4:22 I'll name the variable for the display value, disp, or D-I-S-P, 4:27 and assign it a default value of flex. 4:31 The most common display value used when creating a flex container. 4:34 Now, when working with multiple parameters, 4:38 I like to place each on a separate line to make the code easier to read. 4:40 Nex, create the variables dir for flex-direction, 4:48 then wrap for flex-wrap, and just for justified content. 4:53 Now, not all flex containers will require these three values so 5:02 make them optional parameters setting their default values to null. 5:06 By setting these to null, Sass will ignore them if no value is passed, 5:17 meaning the final CSS will be simpler and less cluttered. 5:20 To complete our mixin, 5:23 we'll set the property values to their respective variables. 5:24 So let's set the display to the display variable, flex-direction to dir, 5:27 flex-wrap to wrap and justify-content to the just variable. 5:33 All right, now we're ready to use our mixin. 5:39 Go ahead and open the containers partial located in the layout folder and let's 5:42 replace the flexbox properties defined in the main content rule with include flexy. 5:47 If we give the file save and refresh the browser, 5:58 you can see that the main containers layout is still being displayed 6:01 using flexbox because we set the display value to flex by default. 6:06 So now, the only argument we need to pass this particular flexy include is wrap, 6:11 which sets main contents flex-wrap value. 6:16 Flex-direction and justify-content will remain as null. 6:20 So let's try passing the value wrap as the flexbox argument. 6:22 And now, our flexbox layout is broken, yikes. 6:28 Well, remember Sass requires that you pass mixin arguments in the same order 6:31 the parameters are listed. 6:36 And if we have a look at our flexy mixin, 6:37 we can see that the first parameter variable in the list is disp for display. 6:40 So the value wrap is being assigned to 6:45 that variable overriding the default flex value. 6:48 As you can see, wrap is the third argument in the list of variables. 6:52 So instead of forcing you to pass redundant display and 6:56 flex-direction arguments only because they are listed before flexbox. 6:59 So for example, before wrap, we'll pass flex and null. 7:03 Well, Sass let's you use keyword arguments to 7:07 explicitly set just the values you need. 7:11 So we can omit all arguments listed before wrap and 7:15 just write the variable wrap before the value. 7:19 If we save this file and have a look at the output CSS, we can see that the mix 7:24 in outputs the display and flex-wrap properties only remain content. 7:29 Over in the card.scss partial, the card rule requires that you set 7:35 flex-direction to column, so let's replace its flex container properties. 7:40 With @include flexy, 7:45 Passing in the keyword argument dir for flex-direction in the value column. 7:50 Once we save this and have a look at the output CSS, you can see that it 7:57 outputs only the display and flex-direction properties for card. 8:01 So when passing multiple arguments, 8:05 keyword arguments make your code easier to read. 8:07 And they help you remember which argument you're referencing. 8:10