Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Reusing Code with Mixins6:57 with Guil Hernandez
Mixins are a smart way of reusing our code. One of the last steps in refactoring is replacing common patterns in our code with reusable mixins. Let's start by writing a mixin that writes our @font-face declarations
So now the last step is to take common patterns in our project and 0:00 replace them with reusable code modules. 0:04 And we can do that with mixins. 0:06 So mixins are a smart way of reusing our code. 0:08 Because instead of having to rewrite the common properties, 0:11 or tedious bits of CSS in our project. 0:15 We can write them once and mixin. 0:18 Then let Sass write them dynamically once we include them. 0:20 And what's also great about creating Sass mixins 0:23 is that we can reuse them on other projects if we want. 0:25 Usually, we'll wanna write mixins that make use of arguments to dynamically alter 0:29 CSS values. 0:33 Instead of ones that just repeat blocks of code. 0:34 Which depending on how we write them, may cause some extra bloat in the CSS output. 0:37 So first, inside the base directory, 0:44 I'm going to create a new partial that will contain our mixins. 0:46 So let's call it _mixins.css. 0:51 And now let's go ahead and import our new partial inside our _index.scss partial. 0:56 So I'll simply copy one of the imports and we're going to import our mixins partial. 1:04 Right after the variables and right before the base styles. 1:11 So I've replaced the variables partial name with the new one; mixins. 1:14 All right, so now we'll go ahead and save our index partial and close it out. 1:22 So first, in our mixin partial, 1:27 let's create a mixin that writes our font face declarations. 1:30 So for instance, let's open up our components directory and 1:34 the typography partial. 1:39 And as we can see we're importing a font and we're using this font for 1:41 our main heading. 1:44 So if we're importing a few fonts in our project. 1:45 Even having to copy the font-face rules and 1:48 change the font families and filenames can be pretty tedious. 1:52 So this will be a great example of how mixins can help us out. 1:55 So before we build our mixin, let's open up our variables partial. 2:00 And like we did for our image asset path, let's create a path for our fonts. 2:05 So right beneath the path image variable, let's declare a new variable. 2:12 And we'll call it path-font. 2:17 And as the value we're going to write the path to our fonts directory, 2:22 which is simply called fonts. 2:27 Right, so let's save our variables partial, and 2:29 back in our mixins partial, let's add a comment. 2:32 Telling us that this is for web fonts. 2:37 And we're gonna write our mixin by typing @mixin. 2:40 And let's call it font-face. 2:45 And then we're gonna add a set of parentheses, and a set of curly braces. 2:49 So inside our parentheses. 2:54 The mix in will accept two arguments. 2:56 One will be the font family, and the other will be the file name. 2:58 So let's go ahead and write the arguments for those. 3:02 First we're going to create the one for the font family. 3:05 So let's create the variable argument family then we'll write a comma and 3:08 right after that we'll create the one for file. 3:13 Which we'll simply call file. 3:16 Okay, so what we'll do next is go over to the typography partial. 3:18 And I'm going to copy the entire font face rule. 3:23 And paste it inside our new mixin. 3:27 So, go ahead and select it and cut it. 3:28 I'll save this. 3:33 Then we'll just go ahead and paste it right inside the font face mixin. 3:34 All right. So first we'll get rid of 3:40 the hard coded abolition regular font family value. 3:42 And as the font family property we're going to pass this family variable. 3:46 So I'll just go ahead and copy it and paste it in as a value. 3:51 And next we're going to make dynamic paths with that variable we just created. 3:55 So once again, since our font assets path is a string. 4:01 We'll need to use interpolation to pass the path font variable in the URL's. 4:06 Just like we did with our image assets. 4:10 All right, so first let me select the first path here and delete it. 4:13 And we're going to use interpolation syntax. 4:18 So we're going to write hash set of curly braces, 4:21 then inside the curly braces define the path font variable. 4:25 And now we'll need to do the same for our font file variable. 4:31 So, web font file names are usually suffixed with web font, so 4:35 we'll keep that in here. 4:40 That way we won't have to retype it. 4:42 So, what I'll do is select abolition-regular in the filename, 4:44 delete it, and replace it with our new variable. 4:50 So once again we'll type hash, curly braces, 4:54 then inside the curly braces we're going to pass that file variable. 4:57 All right, so let me go ahead and copy the two variables we just wrote. 5:03 Then I'm going to replace the three values below with our variables. 5:08 So first, we'll do it for our embedded open type format. 5:11 Right below that, we'll do it for our WAF format, and finally, the true type format. 5:17 Right? So, let's go ahead and save it. 5:23 And now, whenever we include this mixin in a rule, 5:25 it will pass the font family name we define as the font family value. 5:29 Then pass the file name we define in all the source values. 5:35 So now, we can go back to our typography partial, and 5:42 include our new font face mixin. 5:46 So to do that, I'll type @include followed by the mixin name which is, font-face. 5:49 Then our set of parenthesis and a semi colon. 5:56 So now inside the parentheses as the argument, 6:00 let's go ahead and pass the font family name and the file name. 6:03 So first I'm going to pass the abolition-regular 6:08 font family as the font family values. 6:13 So we'll type Abolition Regular and 6:15 make sure it's surrounded by quotes. 6:19 Then we'll add a comma and then we'll type the file name, which is abolition-regular. 6:23 All right, so let's save and compile our partial, 6:29 and if we bring up our CSS output. 6:36 As you can see the mixin and outputs are abolition regular font face rule. 6:40 So now anytime we need to import a font we can simply include our font face mix in. 6:48 And the new font's name in Sass will take care of this 6:53
You need to sign up for Treehouse in order to download course files.Sign up