1
00:00:00,470 --> 00:00:03,420
Mixins aren't just for
commonly use CSS properties.

2
00:00:03,420 --> 00:00:06,415
You can also write selectors
in rule sets inside mixins.

3
00:00:06,415 --> 00:00:09,400
What make this concept powerful
is using the ampersand symbol

4
00:00:09,400 --> 00:00:10,750
to reference the parent selector.

5
00:00:10,750 --> 00:00:12,930
Of any rule containing the mixin include.

6
00:00:12,930 --> 00:00:14,940
This is where SAS really
starts to get fun.

7
00:00:16,770 --> 00:00:21,703
So I'm going to wrap this set of
properties inside this skewed mixin within

8
00:00:21,703 --> 00:00:25,557
an after pseudo element rule
using the ampersand symbol.

9
00:00:35,573 --> 00:00:39,944
Now we can include this mixin inside any
rule we want to create a skewed effect

10
00:00:39,944 --> 00:00:41,670
using a pseudo element.

11
00:00:41,670 --> 00:00:46,170
So let's scroll down to the header and
footer rules and

12
00:00:46,170 --> 00:00:51,870
replace the nested after and
before rules with just include skewed.

13
00:00:51,870 --> 00:00:56,020
We're also going to delete the background,
and I'll say properties for now.

14
00:00:56,020 --> 00:00:59,150
So, for the after rule, let's go ahead and

15
00:00:59,150 --> 00:01:03,600
copy the include directive,
delete the entire rule and

16
00:01:03,600 --> 00:01:09,400
just replace it with the @include skewed
and I'll do the same in my footer rule.

17
00:01:09,400 --> 00:01:15,510
Delete the entire before pseudoelement and
paste in @includes skewed.

18
00:01:15,510 --> 00:01:18,940
This automatically scopes the after rule

19
00:01:18,940 --> 00:01:23,180
we defined in the mixin to the header and
footer selectors.

20
00:01:23,180 --> 00:01:26,045
So I'll save the file and in the output,

21
00:01:26,045 --> 00:01:31,033
you'll see the header after and
footer after rules at the root level.

22
00:01:35,026 --> 00:01:39,384
Now let's spring back those background and
positioning properties we deleted to

23
00:01:39,384 --> 00:01:42,555
create that slanted effect
again in our header and footer.

24
00:01:43,939 --> 00:01:47,022
Now each selector uses a different
property for positioning and

25
00:01:47,022 --> 00:01:49,200
a different value for
the background color.

26
00:01:49,200 --> 00:01:53,190
So we can't place those styles
directly inside the mixin, right?

27
00:01:53,190 --> 00:01:56,180
Well SAS provides an amazing feature.

28
00:01:56,180 --> 00:01:58,660
That let's you pass blocks
of styles to mixins.

29
00:01:58,660 --> 00:02:02,710
In other words you can use the same
mixin for different rules but

30
00:02:02,710 --> 00:02:05,380
provide different content for each rule.

31
00:02:05,380 --> 00:02:08,757
The content directive lets you
dynamically add other content and

32
00:02:08,757 --> 00:02:11,380
styles to mixins wherever
they're included.

33
00:02:11,380 --> 00:02:13,950
This makes your mixins
incredibly flexible.

34
00:02:13,950 --> 00:02:19,341
So let's add the content
directive inside the skewed mixin.

35
00:02:19,341 --> 00:02:23,820
By typing @content
followed by a semi colon.

36
00:02:23,820 --> 00:02:27,883
Now let's scroll down to
the headers include and

37
00:02:27,883 --> 00:02:33,942
replace the semi colon with the set
of opening and closing curly braces.

38
00:02:33,942 --> 00:02:37,306
And the properties you write inside
the curly braces will get placed

39
00:02:37,306 --> 00:02:40,470
wherever you've defined the content
directive in the mixin.

40
00:02:40,470 --> 00:02:44,550
In our case, it's alongside
the styles in the after rule.

41
00:02:44,550 --> 00:02:46,267
So here in the header include,

42
00:02:46,267 --> 00:02:49,512
let's add the background and
bottom offset properties.

43
00:02:49,512 --> 00:02:53,903
We'll say background-color: $white.

44
00:02:57,012 --> 00:03:00,450
And bottom -25px.

45
00:03:00,450 --> 00:03:03,111
And we'll do the same
in the footer include.

46
00:03:06,275 --> 00:03:09,045
We'll pass the mixin
a background color property.

47
00:03:12,667 --> 00:03:18,930
Set it back to $color-shade and
bring back the top offset of -25px.

48
00:03:18,930 --> 00:03:23,290
All right so once we save and
compile these changes.

49
00:03:23,290 --> 00:03:26,910
You should that the properties
we wrote inside our includes

50
00:03:26,910 --> 00:03:30,890
get added to the header and
footer pseudo elements in the output CSS.

51
00:03:30,890 --> 00:03:35,804
So there we have top -25 background
#eee and in the header after rule you

52
00:03:35,804 --> 00:03:40,630
have background color white and
bottom -25px perfect.

53
00:03:40,630 --> 00:03:44,710
While we're at it let's further reduce
repeated code in our style sheet.

54
00:03:44,710 --> 00:03:49,700
So both the header and
footer rules use position relative to

55
00:03:49,700 --> 00:03:54,900
set the positioning context for
the pseudo-elements.

56
00:03:54,900 --> 00:03:57,640
So let's go back up to our mixin, and

57
00:03:57,640 --> 00:04:02,240
add position relative
directly inside the mixin.

58
00:04:02,240 --> 00:04:05,738
So right above the nested
after pseudo-element rule.

59
00:04:10,707 --> 00:04:11,787
Now we can go ahead and

60
00:04:11,787 --> 00:04:15,687
remove the position relative decorations
from the header and footer rules.

61
00:04:19,202 --> 00:04:24,355
So now the mixin outputs position
relative inside each of the rule sets.

62
00:04:29,730 --> 00:04:34,645
Mixins and the content directive have lots
of other hand use cases which you'll learn

63
00:04:34,645 --> 00:04:36,570
about in a later video.

64
00:04:36,570 --> 00:04:38,922
So now I hope you can see
how fun mixins can be and

65
00:04:38,922 --> 00:04:42,380
that you're starting to think of creative
ways you can use them in your projects.