Introducing Mixins6:53 with Guil Hernandez
Mixins are one of the most used features of Sass. They let you break CSS down into modular chunks that you can reuse anywhere in your stylesheets. Being able to do this helps us to avoid writing repetitive code.
You've learned that writing dry, reusable and 0:00 easily maintainable code is the driving force in SaaS. 0:03 But even with features like variables, nested selectors and the ampersand in 0:06 place it's likely that you're style sheets are repeating chunks of styles. 0:09 For instance you may be repeating the same group of properties for 0:14 font, text layout and border styles in various selectors. 0:16 Or you're writing multiple vendor prefixes over and 0:20 over again for new CSS properties that lack full browser support. 0:22 Well, this is where mixins come in to help streamline your CSS and save you time. 0:25 Mixins are one of the most used features of SASS. 0:30 They let you break CSS down into modular chunks that you can reuse 0:33 anywhere in your style sheets. 0:36 Being able to do this helps us to avoid writing repetitive code. 0:38 Let's look at the before and after pseudo element rules 0:42 used to create the skewed effect in our site's header and footer. 0:45 Taking a look at these two rules, we'll see that many of the same properties 0:51 are being repeated like content display, width, height, position and transform. 0:56 Now if we use the same effect on other 0:59 elements of the site we'd end up copying and pasting a lot of this code again. 1:02 That's a lot of repeated code. 1:06 Fortunately SaaS mixins are immensely useful in this situation. 1:08 A mixin is like a reusable CSS rule, 1:12 they let you turn repeated declarations into portable and reusable styles. 1:14 Using Mixins is a two step process. 1:18 First, you create the mixin with the mixin directive. 1:21 Then you include the mixin inside of the rules using the include directive. 1:24 The mixins stored, they need to be defined before they are included 1:28 usually at the top of the style sheet or 1:32 in a separate mixins file as you learn in the later video. 1:33 Below the footer rule let's create a mixin named skewed for our skewed effect 1:37 by typing at mixin followed by skewed and a set of curly braces. 1:43 Now we'll select and cut all the repeated declarations from one of the pseudo 1:50 element rules, so everything but the background color. 1:54 And positioning off set and paste them inside our mixin. 1:57 Before we use this mixin, you can delete all of the background 2:08 positioning properties from the other pseudo element rule. 2:11 Now if you save the file and have a look at the output CSS you won't see any 2:20 of the properties we placed in the mix in yet. 2:25 At this point our mix in doesn't do anything. 2:28 To output code from a mix in you must include it in a rule. 2:32 And you call the mix in using the include directive 2:36 followed by the name of the mix in. 2:39 So let's include skewed inside the nested before and after rules. 2:40 So in the after rule, 2:48 let's say @include skewed. 2:51 I'll just go ahead and copy it and paste it inside the footers before rule. 2:57 So including the mixin in these rules means that SaaS is going to 3:04 place the properties defined in the mixin inside the rules. 3:09 Now when we save and compile our latest changes, we see that 3:14 SaaS produces an undefined mix in error in the console and in the output CSS. 3:20 Remember mix ins need to be defined before they are included. 3:27 And we've written our mix in below the header and footer rule so 3:33 they can't reference the mix in and the style's defined inside it. 3:36 So we'll simply need to move the mix in above the header and footer rules. 3:41 So I'll go ahead and select it, cut it, and place it below the variables. 3:45 I'll also copy this variables comment and 3:57 paste it above the mix in just to have a comment for mix ins. 3:59 I'll give the style sheet a save and 4:07 if I check the output now we should see the content display with height, position, 4:09 and transform properties inside each of the pseudo element rule sets, and we do. 4:14 Cool, and there are also no errors in the consult. 4:20 Perfect, so hopefully you're beginning to see the benefits of using Mixins. 4:23 You define a set of properties in one place and you get to reuse them anywhere. 4:27 Mixins can also help you create layout utilities. 4:37 For instance your design may include many elements that need to be centered 4:39 on the page, well you can create a mixin and 4:43 apply to any element that should be centered. 4:46 Let me show you by creating a mixin named center right 4:49 below out skewed mixin in here. 4:53 So we'll type @mixin center. 4:56 And inside, add the properties needed to center our container element on the page. 5:02 Let's say width 90%, then below that a max-width property. 5:07 I'll store the side's max with value in a variable so 5:13 we can also reference it later in different places. 5:16 So up here in my variables. 5:19 I'll declare in variable named $max-width And set it to 1000 pixels. 5:22 Then back in this center, mixin, 5:33 I'll set the max width value to the max width variable. 5:35 [SOUND]. 5:40 Then I'll apply a margin left of auto and a margin right of auto. 5:42 [SOUND]. 5:47 And you can now include these center mixin wherever you need to center an element. 5:52 For example down in our media queries the main content div is 90 % wide and 5:57 centred when the vport is 768 pixel or wide. 6:04 So here inside the min-width 768 pixel media query near the bottom of the file. 6:08 I'll replace the declarations inside the main content rule with at include center. 6:13 Our layout still looks good. 6:29 So any time you have a container element that needs to 6:31 be centered on the page you simply include the center mixin inside its rule. 6:34 We're just scratching the surface of what you're able to do with mix ins. 6:44 In the next video you'll learn one of the best features of mix ins, 6:47 passing content and style blocks to mix ins. 6:50
You need to sign up for Treehouse in order to download course files.Sign up