- Nested Selectors 7:23
- Use the Ampersand to Reference Parent Selectors 6:57
- Write Nested Selectors 4 objectives
- Introducing Mixins 6:53
- Pass Content Blocks to Mixins 4:42
- Write a Mixin 4 objectives
- Extend the Properties of Selectors 4:05
- Extend Placeholder Selectors 5:04
- Practice Extending a Selector 3 objectives
- Using Comments 3:40
- Sass Workflow Review 7 questions
Preview
Video Player
00:00
00:00
Pass Content Blocks to Mixins
4:42Sass 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 after 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