Writing a Mixin for Common Text Patterns6:45 with Guil Hernandez
In this video, we'll see how a mixin can make writing text properties more convenient.
So, let's create one more mix in. 0:00 Now, currently in our project, we seem to be rewriting a common pattern for 0:03 styling our font size, line height, font weight, and color. 0:08 So for example here in our h3, we're defining a font size. 0:12 A color property, and the line height, and we could also see this pattern. 0:17 In other places like in the body and in our h2 rule. 0:22 Well sure we can keep the font declarations as is 0:27 even though they don't accept color values. 0:30 And that's fine. 0:32 But let's see how can use a mix in to help making writing these 0:33 properties a little more convenient for us. 0:36 So back in our mixins.scss partial. 0:40 Let's include a comment that lets us know that this is our text mixin. 0:43 And let's create a new mixin by typing @mixin and let's call it text. 0:50 So our text mixin will accept four arguments. 0:59 One for the font size, another for the line height, one for 1:02 the font weight, and finally one for color. 1:05 Now the only required value will be for the font size. 1:07 So, let's first declare an argument for that, so we'll call it size. 1:11 And next, let's set our line height argument. 1:17 We'll call this one l-height. 1:19 Let's also set one for font weight. 1:23 Let's call it weight. 1:26 And finally, we'll set the color argument. 1:27 I'm gonna call this one color. 1:30 So, the next thing we're gonna do is set the default values for 1:32 line height, weight and color to null. 1:36 And. And what this does is it will make them 1:40 optional arguments, and by setting the values to null, 1:42 we're not outputting any CSS for 1:46 the three properties unless we pass a value for them when including this mixin. 1:48 Take a look at the teacher's notes for more reference on the null data type. 1:54 All right, next we're going to write the properties for our mixin. 1:59 So first we're going to add a font size property. 2:03 And the value for that will be the size variable and right below that. 2:07 Let's write a line height property. 2:16 And we're gonna make the value for this, the l-height variable. 2:18 And right below that, we're going to add the font weight property and 2:24 this will accept the argument weight and finally. 2:30 We're going to write a color property, and the value for 2:34 this will be the color variable. 2:38 So now the values we enter when including this text mixin 2:41 will be dynamically passed down to their respective properties. 2:46 So if you've used mixins before, you'll have noticed that where we include 2:51 a mixin in a rule is important because it affects the output CSS cascade. 2:56 So it's usually best to include mixins first, in a rule, 3:00 followed by the rest of the declarations. 3:05 So first, we're going to include our text mixin. 3:08 Inside the body rule. 3:11 So as the top declaration, we're going to say @include text. 3:12 And then we'll pass our arguments. 3:18 So as the font size value, let's pass. 3:20 1 em and the line height will be 1.5 and 3:24 since we're not passing a value for font weight, in our list of arguments, 3:30 since it doesn't need one, we'll need to let Sass know that we're skipping it 3:34 by including the next argument in the list and the value we want to pass. 3:38 Otherwise Sass will assign the wrong value to a property. 3:43 Now there are ways around that but it's beyond the scope of this course. 3:46 So we're gonna skip the line height value and define the color value next. 3:48 So we're gonna have to type the color variable in our argument, 3:53 then define the color value, in this case it's the color text based variable. 3:57 All right. So now we could actually delete the color 4:05 declaration in our body rule, and we're going to keep the font stack variable. 4:08 And now we're only gonna define the font family property. 4:14 And for that we'll make the value stack Helvetica. 4:18 [BLANK_AUDIO] 4:21 All right. Looks good. 4:24 So let's do another one. 4:26 We'll scroll down to the h2 rule. 4:31 And as the top declaration, 4:33 we're going to say @include text. 4:37 And let's pass our list of arguments. 4:41 So as the font-size, go ahead and copy this font-size value, 4:44 paste it in as a first argument. 4:48 Then the line-height is 1.1 and the font-weight will be normal. 4:51 And there's no color for this one, so we're going to leave it out. 4:57 So now we can delete the three declarations below, save it, 5:01 and let's take a look at the browser. 5:06 All right, so that looks good. 5:09 Everything went through just fine. 5:12 And right below. 5:14 Let's do the same for our h3. 5:15 So, as the top declaration, we'll say @include text. 5:17 And as our font size argument, we're gonna say 1.25em. 5:23 Our line height will be 1.2. 5:30 So, again, we'll need to define the variable, color, in our list of arguments. 5:32 And this time the value will be the color variable, color-text-dark, 5:38 so let's go ahead and remove the three declarations below and 5:43 only keep the include and the margin bottom declaration in our h3, so 5:47 let's see how that looks, we'll save and refresh. 5:52 And everything looks good. 5:56 So go ahead and add the rest of these on your own, 5:59 wherever you see fit in the project. 6:03 Now in the advance Sass, and modular CSS with Sass course, you learn how to 6:06 build more advanced functions and mixins to handle font sizes and line height. 6:11 Again, these are all just suggestions, to make our workflow more efficient. 6:15 You can do things differently if you'd like. 6:20 If you prefer writing out the full declarations, that's also okay. 6:22 Just remember, the key to dry code is not repeating yourself, when writing code. 6:25 It doesn't necessarily mean that there can't be repetition in the css output. 6:31 And finally, there are actually some benefits to using mixins over extends, so 6:36 I've added some great reference material on that in the teachers notes. 6:40
You need to sign up for Treehouse in order to download course files.Sign up