Pass Content Blocks to Mixins4:42 with Guil Hernandez
Sass provides a feature that lets you pass blocks of styles to mixins. You can use one mixin for different rules, but provide different content for each rule, using the @content directive. This makes your mixins incredibly flexible.
Mixins aren't just for commonly use CSS properties. 0:00 You can also write selectors in rule sets inside mixins. 0:03 What make this concept powerful is using the ampersand symbol 0:06 to reference the parent selector. 0:09 Of any rule containing the mixin include. 0:10 This is where SAS really starts to get fun. 0:12 So I'm going to wrap this set of properties inside this skewed mixin within 0:16 an actor pseudo element rule using the ampersand symbol. 0:21 Now we can include this mixin inside any rule we want to create a skewed effect 0:35 using a pseudo element. 0:39 So let's scroll down to the header and footer rules and 0:41 replace the nested after and before rules with just include skewed. 0:46 We're also going to delete the background, and I'll say properties for now. 0:51 So, for the after rule, let's go ahead and 0:56 copy the include directive, delete the entire rule and 0:59 just replace it with the @include skewed and I'll do the same in my footer rule. 1:03 Delete the entire before pseudoelement and paste in @includes skewed. 1:09 This automatically scopes the after rule 1:15 we defined in the mixin to the header and footer selectors. 1:18 So I'll save the file and in the output, 1:23 you'll see the header after and footer after rules at the root level. 1:26 Now let's spring back those background and positioning properties we deleted to 1:35 create that slanted effect again in our header and footer. 1:39 Now each selector uses a different property for positioning and 1:43 a different value for the background color. 1:47 So we can't place those styles directly inside the mixin, right? 1:49 Well SAS provides an amazing feature. 1:53 That let's you pass blocks of styles to mixins. 1:56 In other words you can use the same mixin for different rules but 1:58 provide different content for each rule. 2:02 The content directive lets you dynamically add other content and 2:05 styles to mixins wherever they're included. 2:08 This makes your mixins incredibly flexible. 2:11 So let's add the content directive inside the skewed mixin. 2:13 By typing @content followed by a semi colon. 2:19 Now let's scroll down to the headers include and 2:23 replace the semi colon with the set of opening and closing curly braces. 2:27 And the properties you write inside the curly braces will get placed 2:33 wherever you've defined the content directive in the mixin. 2:37 In our case, it's alongside the styles in the after rule. 2:40 So here in the header include, 2:44 let's add the background and bottom offset properties. 2:46 We'll say background-color: $white. 2:49 And bottom -25px. 2:57 And we'll do the same in the footer include. 3:00 We'll pass the mixin a background color property. 3:06 Set it back to $color-shade and bring back the top offset of -25px. 3:12 All right so once we save and compile these changes. 3:18 You should that the properties we wrote inside our includes 3:23 get added to the header and footer pseudo elements in the output CSS. 3:26 So there we have top -25 background #eee and in the header after rule you 3:30 have background color white and bottom -25px perfect. 3:35 While we're at it let's further reduce repeated code in our style sheet. 3:40 So both the header and footer rules use position relative to 3:44 set the positioning context for the pseudo-elements. 3:49 So let's go back up to our mixin, and 3:54 add position relative directly inside the mixin. 3:57 So right above the nested after pseudo-element rule. 4:02 Now we can go ahead and 4:10 remove the position relative decorations from the header and footer rules. 4:11 So now the mixin outputs position relative inside each of the rule sets. 4:19 Mixins and the content directive have lots of other hand use cases which you'll learn 4:29 about in a later video. 4:34 So now I hope you can see how fun mixins can be and 4:36 that you're starting to think of creative ways you can use them in your projects. 4:38
You need to sign up for Treehouse in order to download course files.Sign up