1
00:00:00,420 --> 00:00:03,060
You've learned that writing dry,
reusable and

2
00:00:03,060 --> 00:00:06,060
easily maintainable code is
the driving force in SaaS.

3
00:00:06,060 --> 00:00:09,680
But even with features like variables,
nested selectors and the ampersand in

4
00:00:09,680 --> 00:00:14,070
place it's likely that you're style
sheets are repeating chunks of styles.

5
00:00:14,070 --> 00:00:16,790
For instance you may be repeating
the same group of properties for

6
00:00:16,790 --> 00:00:20,060
font, text layout and
border styles in various selectors.

7
00:00:20,060 --> 00:00:22,590
Or you're writing multiple
vendor prefixes over and

8
00:00:22,590 --> 00:00:25,950
over again for new CSS properties
that lack full browser support.

9
00:00:25,950 --> 00:00:29,210
Well, this is where mixins come in to help
streamline your CSS and save you time.

10
00:00:30,310 --> 00:00:33,290
Mixins are one of the most
used features of SASS.

11
00:00:33,290 --> 00:00:36,740
They let you break CSS down into
modular chunks that you can reuse

12
00:00:36,740 --> 00:00:38,250
anywhere in your style sheets.

13
00:00:38,250 --> 00:00:40,960
Being able to do this helps us to
avoid writing repetitive code.

14
00:00:42,340 --> 00:00:45,830
Let's look at the before and
after pseudo element rules

15
00:00:45,830 --> 00:00:50,310
used to create the skewed effect
in our site's header and footer.

16
00:00:51,970 --> 00:00:56,035
Taking a look at these two rules,
we'll see that many of the same properties

17
00:00:56,035 --> 00:00:59,465
are being repeated like content display,
width, height, position and transform.

18
00:00:59,465 --> 00:01:02,185
Now if we use the same effect on other

19
00:01:02,185 --> 00:01:06,285
elements of the site we'd end up copying
and pasting a lot of this code again.

20
00:01:06,285 --> 00:01:08,265
That's a lot of repeated code.

21
00:01:08,265 --> 00:01:12,515
Fortunately SaaS mixins are immensely
useful in this situation.

22
00:01:12,515 --> 00:01:14,615
A mixin is like a reusable CSS rule,

23
00:01:14,615 --> 00:01:18,740
they let you turn repeated declarations
into portable and reusable styles.

24
00:01:18,740 --> 00:01:21,170
Using Mixins is a two step process.

25
00:01:21,170 --> 00:01:24,310
First, you create the mixin
with the mixin directive.

26
00:01:24,310 --> 00:01:28,750
Then you include the mixin inside of
the rules using the include directive.

27
00:01:28,750 --> 00:01:32,380
The mixins stored, they need to be
defined before they are included

28
00:01:32,380 --> 00:01:33,730
usually at the top of the style sheet or

29
00:01:33,730 --> 00:01:37,260
in a separate mixins file as
you learn in the later video.

30
00:01:37,260 --> 00:01:43,530
Below the footer rule let's create a mixin
named skewed for our skewed effect

31
00:01:43,530 --> 00:01:48,660
by typing at mixin followed by skewed and
a set of curly braces.

32
00:01:50,210 --> 00:01:54,550
Now we'll select and cut all the repeated
declarations from one of the pseudo

33
00:01:54,550 --> 00:01:57,740
element rules, so everything but
the background color.

34
00:01:57,740 --> 00:02:02,405
And positioning off set and
paste them inside our mixin.

35
00:02:08,430 --> 00:02:11,410
Before we use this mixin,
you can delete all of the background

36
00:02:11,410 --> 00:02:14,407
positioning properties from
the other pseudo element rule.

37
00:02:20,428 --> 00:02:25,270
Now if you save the file and have a look
at the output CSS you won't see any

38
00:02:25,270 --> 00:02:28,350
of the properties we
placed in the mix in yet.

39
00:02:28,350 --> 00:02:32,250
At this point our mix
in doesn't do anything.

40
00:02:32,250 --> 00:02:36,410
To output code from a mix in
you must include it in a rule.

41
00:02:36,410 --> 00:02:39,430
And you call the mix in
using the include directive

42
00:02:39,430 --> 00:02:40,710
followed by the name of the mix in.

43
00:02:40,710 --> 00:02:48,120
So let's include skewed inside
the nested before and after rules.

44
00:02:48,120 --> 00:02:51,342
So in the after rule,

45
00:02:51,342 --> 00:02:56,000
let's say @include skewed.

46
00:02:57,760 --> 00:03:02,930
I'll just go ahead and copy it and
paste it inside the footers before rule.

47
00:03:04,300 --> 00:03:09,390
So including the mixin in these
rules means that SaaS is going to

48
00:03:09,390 --> 00:03:14,870
place the properties defined
in the mixin inside the rules.

49
00:03:14,870 --> 00:03:20,465
Now when we save and
compile our latest changes, we see that

50
00:03:20,465 --> 00:03:26,510
SaaS produces an undefined mix in error
in the console and in the output CSS.

51
00:03:27,780 --> 00:03:33,070
Remember mix ins need to be
defined before they are included.

52
00:03:33,070 --> 00:03:36,810
And we've written our mix in below
the header and footer rule so

53
00:03:36,810 --> 00:03:41,040
they can't reference the mix in and
the style's defined inside it.

54
00:03:41,040 --> 00:03:45,920
So we'll simply need to move the mix
in above the header and footer rules.

55
00:03:45,920 --> 00:03:52,677
So I'll go ahead and select it, cut it,
and place it below the variables.

56
00:03:57,268 --> 00:03:59,744
I'll also copy this variables comment and

57
00:03:59,744 --> 00:04:03,123
paste it above the mix in just
to have a comment for mix ins.

58
00:04:07,604 --> 00:04:09,816
I'll give the style sheet a save and

59
00:04:09,816 --> 00:04:14,979
if I check the output now we should see
the content display with height, position,

60
00:04:14,979 --> 00:04:20,090
and transform properties inside each of
the pseudo element rule sets, and we do.

61
00:04:20,090 --> 00:04:23,100
Cool, and
there are also no errors in the consult.

62
00:04:23,100 --> 00:04:27,820
Perfect, so hopefully you're beginning
to see the benefits of using Mixins.

63
00:04:27,820 --> 00:04:33,161
You define a set of properties in one
place and you get to reuse them anywhere.

64
00:04:37,953 --> 00:04:39,124
Mixins can also help you
create layout utilities.

65
00:04:39,124 --> 00:04:43,946
For instance your design may include
many elements that need to be centered

66
00:04:43,946 --> 00:04:46,698
on the page,
well you can create a mixin and

67
00:04:46,698 --> 00:04:49,703
apply to any element
that should be centered.

68
00:04:49,703 --> 00:04:53,823
Let me show you by creating
a mixin named center right

69
00:04:53,823 --> 00:04:56,360
below out skewed mixin in here.

70
00:04:56,360 --> 00:05:00,901
So we'll type @mixin center.

71
00:05:02,310 --> 00:05:07,230
And inside, add the properties needed to
center our container element on the page.

72
00:05:07,230 --> 00:05:13,554
Let's say width 90%,
then below that a max-width property.

73
00:05:13,554 --> 00:05:16,390
I'll store the side's max
with value in a variable so

74
00:05:16,390 --> 00:05:19,700
we can also reference it
later in different places.

75
00:05:19,700 --> 00:05:21,610
So up here in my variables.

76
00:05:22,970 --> 00:05:31,389
I'll declare in variable named
$max-width And set it to 1000 pixels.

77
00:05:33,487 --> 00:05:35,546
Then back in this center, mixin,

78
00:05:35,546 --> 00:05:38,890
I'll set the max width value
to the max width variable.

79
00:05:40,075 --> 00:05:42,464
[SOUND].

80
00:05:42,464 --> 00:05:47,775
Then I'll apply a margin left of auto and
a margin right of auto.

81
00:05:47,775 --> 00:05:52,258
[SOUND].

82
00:05:52,258 --> 00:05:56,590
And you can now include these center mixin
wherever you need to center an element.

83
00:05:57,750 --> 00:06:04,024
For example down in our media queries
the main content div is 90 % wide and

84
00:06:04,024 --> 00:06:08,005
centred when the vport is 768 pixel or
wide.

85
00:06:08,005 --> 00:06:13,260
So here inside the min-width 768 pixel
media query near the bottom of the file.

86
00:06:13,260 --> 00:06:21,337
I'll replace the declarations inside the
main content rule with at include center.

87
00:06:29,606 --> 00:06:31,060
Our layout still looks good.

88
00:06:31,060 --> 00:06:34,393
So any time you have a container
element that needs to

89
00:06:34,393 --> 00:06:39,265
be centered on the page you simply
include the center mixin inside its rule.

90
00:06:44,231 --> 00:06:47,660
We're just scratching the surface of
what you're able to do with mix ins.

91
00:06:47,660 --> 00:06:50,770
In the next video you'll learn one
of the best features of mix ins,

92
00:06:50,770 --> 00:06:52,950
passing content and
style blocks to mix ins.