1
00:00:00,060 --> 00:00:05,900
We'll go over to our main.scss partial
file, where we already have the icon

2
00:00:05,900 --> 00:00:11,040
toggle selector defined and a few
properties to style parts of it.

3
00:00:11,040 --> 00:00:15,610
But before we include the pseudo element
mix-in in this rule,

4
00:00:15,610 --> 00:00:21,370
let's go over to our HTML file and give
this toggle icon element,

5
00:00:21,370 --> 00:00:26,140
the class toggle icon, so right here in
the opening span tag,

6
00:00:26,140 --> 00:00:31,190
we'll add a class attribute and we'll say,
icn toggle.

7
00:00:33,450 --> 00:00:37,410
And something else we'll do is give this
nested b element,

8
00:00:37,410 --> 00:00:42,590
the screen reader text class, because
we'll also want this text hidden, but

9
00:00:42,590 --> 00:00:45,400
still accessible to screen readers, so
let's add,

10
00:00:45,400 --> 00:00:51,320
SRT, so when we save our index.html file
and go over to the preview,

11
00:00:51,320 --> 00:00:56,080
there we see the toggle text, but when we
refresh, it's now hidden.

12
00:00:56,080 --> 00:01:00,790
So, here we're seeing a part of our nav
toggle icon, which is, your

13
00:01:00,790 --> 00:01:05,210
standard hamburger menu, as it's often
called, but the middle line is missing.

14
00:01:05,210 --> 00:01:07,310
The, the meat of the hamburger icon.

15
00:01:07,310 --> 00:01:09,980
So we'll add that part in the pseudo
element.

16
00:01:09,980 --> 00:01:14,130
So back in our main dot CSS partial, we'll
go down to the icon,

17
00:01:14,130 --> 00:01:19,090
toggle rule, and right above, we'll
include that pseudo element mixed in.

18
00:01:19,090 --> 00:01:25,142
So we'll say, at include, PL, [SOUND] and

19
00:01:25,142 --> 00:01:33,733
let's make this a before pseudo element by
passing before.

20
00:01:33,733 --> 00:01:38,111
We'll make the width 25 pixels and the
height three pixels and

21
00:01:38,111 --> 00:01:42,248
inside the mix-in, let's define a
background colour, so

22
00:01:42,248 --> 00:01:47,843
we'll use the background property and
we'll again call that palette function,

23
00:01:47,843 --> 00:01:53,240
we created in a previous video and we'll
want the light shade of our base grey.

24
00:01:53,240 --> 00:01:55,900
So we'll pass grey in light, as the
arguments for

25
00:01:55,900 --> 00:02:02,000
palette and let's set a top, offset of
four pixels.

26
00:02:02,000 --> 00:02:04,692
Cuz remember, it's displayed absolute by
default.

27
00:02:04,692 --> 00:02:07,650
All right, so when I save our main SCSS
file and

28
00:02:07,650 --> 00:02:12,080
refresh our preview, there's our full
toggle menu icon.

29
00:02:12,080 --> 00:02:17,600
Now currently, there's nothing preventing
us from outputting any value, for L.

30
00:02:17,600 --> 00:02:21,000
So our mix-in is a bit fragile.

31
00:02:21,000 --> 00:02:26,140
So for example, say I pass, b as a pseudo
element and when we refresh it,

32
00:02:26,140 --> 00:02:29,270
well it's still outputs it and now we get
nothing, right?

33
00:02:29,270 --> 00:02:30,770
So we need to fix this.

34
00:02:30,770 --> 00:02:35,220
So in our case, we only want to output
CSS, if the value for

35
00:02:35,220 --> 00:02:38,340
L, is either before or after.

36
00:02:38,340 --> 00:02:42,828
So let's give our mix-in a fail-safe
feature, using SASS if and

37
00:02:42,828 --> 00:02:44,330
warn directives.

38
00:02:44,330 --> 00:02:50,502
So, I'm gonna write two directives, then
explain, what they do.

39
00:02:50,502 --> 00:02:57,482
So right above, the rule in our mix-in,

40
00:02:57,482 --> 00:03:07,262
at if [SOUND] el, equals before [SOUND] or
el, equals actor.

41
00:03:07,262 --> 00:03:09,961
[SOUND]

42
00:03:09,961 --> 00:03:18,057
Then we'll say,

43
00:03:18,057 --> 00:03:22,915
else [SOUND]

44
00:03:22,915 --> 00:03:28,853
@warn [SOUND]

45
00:03:28,853 --> 00:03:36,961
and the message.

46
00:03:36,961 --> 00:03:42,580
[SOUND] Okay, so here we're seeing if

47
00:03:42,580 --> 00:03:48,743
the value we pass for l is either before,

48
00:03:48,743 --> 00:03:55,451
or after, output the CSS for this mix-in,

49
00:03:55,451 --> 00:04:01,254
otherwise don't output anything and

50
00:04:01,254 --> 00:04:07,059
instead display this warning message

51
00:04:07,059 --> 00:04:11,615
we defined, in the console.

52
00:04:11,615 --> 00:04:17,132
So now if we take a look at our console
output and, scroll up we can see that,

53
00:04:17,132 --> 00:04:22,124
right here it displays warning, b is not a
valid pseudo-element,

54
00:04:22,124 --> 00:04:28,510
because earlier, remember, we defined that
l value as b instead of before.

55
00:04:28,510 --> 00:04:32,330
Now, the latest version of SASS, supports
a new error directive that will

56
00:04:32,330 --> 00:04:35,900
print a regular error message, in the CSS
output, and

57
00:04:35,900 --> 00:04:40,120
it's really useful for these types of,
user defined mix-ins and functions.

58
00:04:40,120 --> 00:04:46,420
So instead of warn, if we, use the error
directive and,

59
00:04:46,420 --> 00:04:51,890
save it, when we take a look at, the
browser preview, we can see that,

60
00:04:51,890 --> 00:04:57,090
since we didn't pass before or after, it
outputs the error message,

61
00:04:57,090 --> 00:05:01,190
in our preview and it will also display it
in the CSS output.

62
00:05:01,190 --> 00:05:07,090
So now if we go back to our main.scss
partial and, pass it before,

63
00:05:07,090 --> 00:05:09,380
as the pseudo element type.

64
00:05:09,380 --> 00:05:13,150
When we refresh our preview, everything's
back to normal.

65
00:05:13,150 --> 00:05:15,180
Okay.
So, that does it for

66
00:05:15,180 --> 00:05:16,730
functions and mix-ins.

67
00:05:16,730 --> 00:05:21,170
Keep in mind that you can tailor any of
these examples, to your project's needs.

68
00:05:21,170 --> 00:05:23,930
So now were starting to see the benefits
of using SASS,

69
00:05:23,930 --> 00:05:27,430
to keep our code nicely organized and
configurable.

70
00:05:27,430 --> 00:05:30,870
Next, we'll learn how BEM, or block
element modifier,

71
00:05:30,870 --> 00:05:35,500
gives us a naming convention that helps
makes our code more modular and portable.

72
00:05:35,500 --> 00:05:37,530
Once we build a few modules with SASS and

73
00:05:37,530 --> 00:05:41,300
BEM, we'll see how easy it is to reuse
those patterns, instead of having to

74
00:05:41,300 --> 00:05:45,000
create new ones, keeping our project
maintainable, regardless of the scale