1
00:00:00,310 --> 00:00:02,750
There's lots of benefits to using Sass
when building or

2
00:00:02,750 --> 00:00:04,740
refactoring responsive layout.

3
00:00:04,740 --> 00:00:07,940
Mainly, because of how we are able to
define media queries.

4
00:00:07,940 --> 00:00:10,640
For instance, we have the handy option of
nesting them,

5
00:00:10,640 --> 00:00:14,790
inside rules, which keeps media queries
local to their component.

6
00:00:14,790 --> 00:00:18,539
So let's go over some of the ways we can
refactor our project's media queries.

7
00:00:19,800 --> 00:00:23,470
So one of the ways we can define media
queries with Sass,

8
00:00:23,470 --> 00:00:27,100
is creating a layout partial for each
media query.

9
00:00:27,100 --> 00:00:30,490
And defining them inside their respective
partial files.

10
00:00:30,490 --> 00:00:34,560
Now one of the benefits of doing that is
that we're able to see the entire set of

11
00:00:34,560 --> 00:00:36,770
media queries at once.

12
00:00:36,770 --> 00:00:39,730
But I prefer to nest media queries inside
rule.

13
00:00:39,730 --> 00:00:43,410
Because this keeps our media queries local
to the component and

14
00:00:43,410 --> 00:00:45,420
the original styles we're modifying.

15
00:00:45,420 --> 00:00:49,630
And what's great is that Sass will output
each nested media query

16
00:00:49,630 --> 00:00:53,000
as a separate rule when the stylesheet is
compiled.

17
00:00:53,000 --> 00:00:57,080
Since media queries tend to get duplicated
a lot in projects,

18
00:00:57,080 --> 00:01:01,290
instead of hard coding the media query
breakpoints every time we write a media

19
00:01:01,290 --> 00:01:05,570
query, it's usually best to create
variables or mixins for them.

20
00:01:05,570 --> 00:01:08,410
So, for our project, we're going to define
a couple

21
00:01:08,410 --> 00:01:11,740
of breakpoint variables to make things
more maintainable.

22
00:01:11,740 --> 00:01:15,240
So, back in our styles.scss partial,

23
00:01:15,240 --> 00:01:18,810
the only remaining rules we have in here
are our media queries.

24
00:01:18,810 --> 00:01:23,460
So, we'll need to sort of distribute these
to their respective rules.

25
00:01:23,460 --> 00:01:27,570
Now, currently, we're using two
breakpoints in our project.

26
00:01:27,570 --> 00:01:31,620
One of these adjust the layout in the
narrow viewport sizes.

27
00:01:31,620 --> 00:01:36,680
While the other adjusts parts of the
design in wider viewport sizes.

28
00:01:36,680 --> 00:01:41,903
And as we can see, the breakpoints are at
a max width of 1024 pixels,

29
00:01:41,903 --> 00:01:44,310
and a max width of 768 pixels.

30
00:01:45,720 --> 00:01:50,510
So let's go back to our variables partial,
inside the base folder.

31
00:01:50,510 --> 00:01:53,520
And declare variables for those
breakpoints.

32
00:01:53,520 --> 00:01:55,660
So we'll scroll all the way down.

33
00:01:55,660 --> 00:01:59,350
And right beneath the asset path variable,

34
00:01:59,350 --> 00:02:03,960
let's add another comment that tells us
these are our media query breakpoint.

35
00:02:03,960 --> 00:02:07,088
So we'll say media query breakpoints.

36
00:02:07,088 --> 00:02:11,173
[SOUND] And now we're going to create our
two breakpoint variables.

37
00:02:11,173 --> 00:02:16,265
So first, let's create the variable for
the more narrow breakpoint.

38
00:02:16,265 --> 00:02:21,977
So let's call that break narrow, and right
below that,

39
00:02:21,977 --> 00:02:26,618
let's create one for the wide breakpoint,
so

40
00:02:26,618 --> 00:02:30,426
we'll call this one break dash wide.

41
00:02:30,426 --> 00:02:33,734
[SOUND] So now as the values for these
variables,

42
00:02:33,734 --> 00:02:38,874
we'll add their respective media query
expressions in between quotes.

43
00:02:38,874 --> 00:02:44,065
So first, for break narrow, let's go ahead
and

44
00:02:44,065 --> 00:02:50,157
add the expression max [SOUND] width
[SOUND] 768 pixels.

45
00:02:50,157 --> 00:02:54,533
[SOUND] And right below that, for break
wide,

46
00:02:54,533 --> 00:03:00,645
we'll write the expression max width
[SOUND] 1024 pixels.

47
00:03:00,645 --> 00:03:03,261
[SOUND] Okay.

48
00:03:03,261 --> 00:03:08,880
So now let's begin defining some of the
media query adjustments in our project.

49
00:03:08,880 --> 00:03:13,980
So for instance, let's first go inside our
components directory.

50
00:03:13,980 --> 00:03:16,310
And open up our icons partial.

51
00:03:16,310 --> 00:03:20,920
And let's have a media query for our arrow
rule.

52
00:03:20,920 --> 00:03:26,590
So if we go back to our style.scss
partial, we can see that the arrow

53
00:03:26,590 --> 00:03:31,940
adjustments here are in the max width 768
media query.

54
00:03:31,940 --> 00:03:38,120
So I'm actually going to cut the display:
none; declaration

55
00:03:38,120 --> 00:03:42,000
out of this media query and I'll just
delete the rule there altogether.

56
00:03:42,000 --> 00:03:45,960
And I'll go back inside the icons partial
and

57
00:03:45,960 --> 00:03:49,010
define our media query inside this arrow
rule.

58
00:03:49,010 --> 00:03:52,820
So let's say at media, and once again,

59
00:03:52,820 --> 00:03:57,370
to pass the breakpoint variables, we'll
need to use interpolation syntax.

60
00:03:57,370 --> 00:04:03,220
So I'll to hash, curly braces, then inside
we're going to pass the break

61
00:04:03,220 --> 00:04:06,951
narrow variable for our narrow breakpoint.

62
00:04:06,951 --> 00:04:09,720
[SOUND] So inside the media query rule,

63
00:04:09,720 --> 00:04:13,535
I'm gonna paste in that display none
declaration.

64
00:04:13,535 --> 00:04:18,780
Then I'll go ahead and save and preview
the project and let's see what happens.

65
00:04:18,780 --> 00:04:19,710
Let's see if this worked.

66
00:04:19,710 --> 00:04:22,240
So, I'm gonna start resizing the browser
and

67
00:04:22,240 --> 00:04:27,130
sure enough, our icon image is displayed
to none in the narrow viewport sizes.

68
00:04:27,130 --> 00:04:28,250
So great.

69
00:04:28,250 --> 00:04:30,180
Our media query is working just fine.

70
00:04:30,180 --> 00:04:31,290
So let's do some more.

71
00:04:31,290 --> 00:04:35,560
Let's close out our icons.scss partial and

72
00:04:35,560 --> 00:04:39,450
let's now go over to our typography
partial.

73
00:04:39,450 --> 00:04:41,850
And let's define some media queries in
here.

74
00:04:41,850 --> 00:04:45,790
So first, let's add one inside our main
heading rule.

75
00:04:45,790 --> 00:04:51,750
So at the very bottom, we're going to say
at media hash, curly brackets.

76
00:04:51,750 --> 00:04:56,912
[SOUND] And once again, our media query
breakpoint variable will be break narrow.

77
00:04:56,912 --> 00:05:04,174
[SOUND] So let's go back to our style.scss
partial.

78
00:05:04,174 --> 00:05:10,530
And we're going to cut out the
declarations in the main heading rule.

79
00:05:10,530 --> 00:05:11,910
So now I'm just gonna delete that.

80
00:05:13,340 --> 00:05:15,780
And back in our typography partial,

81
00:05:15,780 --> 00:05:18,080
I'll just paste those inside the nested
media query.

82
00:05:18,080 --> 00:05:22,031
[SOUND] All right, so let's save.

83
00:05:22,031 --> 00:05:24,310
I'll refresh, and take a look real quick.

84
00:05:26,410 --> 00:05:29,160
And it looks like, that looks good.

85
00:05:29,160 --> 00:05:30,860
Our main heading adjusts accordingly.

86
00:05:30,860 --> 00:05:35,884
[SOUND] And right below in our title rule,
let's add a media query here,

87
00:05:35,884 --> 00:05:39,818
so at the bottom, we'll say, at media and
once again,

88
00:05:39,818 --> 00:05:43,272
we're going to pass the break narrow
variable.

89
00:05:43,272 --> 00:05:49,342
[BLANK_AUDIO]

90
00:05:49,342 --> 00:05:53,624
And once again, we'll go back to our style
partial and

91
00:05:53,624 --> 00:05:57,908
let's cut out the media query rules under
main title,

92
00:05:57,908 --> 00:06:01,742
[SOUND] and paste them inside our new
media query.

93
00:06:01,742 --> 00:06:06,670
[SOUND] I'll save,

94
00:06:06,670 --> 00:06:09,444
refresh.

95
00:06:09,444 --> 00:06:10,940
And, yep, that looks good.

96
00:06:12,430 --> 00:06:16,450
And I'll go ahead and do one more before I
leave you on your own to do the rest.

97
00:06:16,450 --> 00:06:20,262
So let's go ahead and do the one for our
intro paragraph.

98
00:06:20,262 --> 00:06:24,667
So, right below the include declaration,
we'll say,

99
00:06:24,667 --> 00:06:29,825
at media, and we'll once again pass that
break narrow variable.

100
00:06:29,825 --> 00:06:37,627
[SOUND] So, back in our style.scss
partial,

101
00:06:37,627 --> 00:06:44,826
let's copy the font size here for intro.

102
00:06:44,826 --> 00:06:49,500
Paste it inside our new media query rule.

103
00:06:49,500 --> 00:06:50,070
Then I'll go ahead and

104
00:06:50,070 --> 00:06:53,890
take a look in the browser just to see if
it's working and yep, it's looking good.

105
00:06:56,000 --> 00:07:00,090
And now we're all set with our typography
media queries.

106
00:07:00,090 --> 00:07:02,740
Now I'm not gonna write all the media
queries in our project here,

107
00:07:02,740 --> 00:07:04,570
because that will take up a lot of time.

108
00:07:04,570 --> 00:07:09,440
So, go ahead and add the rest of them on
your own, and then you can go ahead and

109
00:07:09,440 --> 00:07:12,860
delete the style.scss partial when you're
all done.

110
00:07:15,130 --> 00:07:17,970
Finally, there's kind of a misconception
that

111
00:07:17,970 --> 00:07:21,920
nested media queries are a maintainability
nightmare.

112
00:07:21,920 --> 00:07:24,590
And they can cause bloat in the output.

113
00:07:24,590 --> 00:07:27,510
Well that just depends on the scale of
your project, but

114
00:07:27,510 --> 00:07:30,140
even then, the extra media query rules and

115
00:07:30,140 --> 00:07:34,710
the output do not bloat the file size in
any significant way.

116
00:07:34,710 --> 00:07:37,330
And as with most things in web
development,

117
00:07:37,330 --> 00:07:40,000
there's really no silver bullet method
here.

118
00:07:40,000 --> 00:07:44,730
So finds what's best for the conditions of
your project and stick with that.

119
00:07:44,730 --> 00:07:49,780
We can also build powerful conditional
media query nixins using Sass's if and

120
00:07:49,780 --> 00:07:50,900
else directives.

121
00:07:50,900 --> 00:07:55,800
So in the teacher's notes, I've posted a
link to the section in our Modular CSS

122
00:07:55,800 --> 00:07:57,960
with Sass course where you can learn how
to build them.

123
00:07:59,140 --> 00:08:00,010
So that's it.

124
00:08:00,010 --> 00:08:01,900
Our CSS refactoring is complete.

125
00:08:01,900 --> 00:08:03,409
That wasn't so bad after all, was it?

126
00:08:04,480 --> 00:08:07,860
Coming up next, we'll take a look at how
to get around some of the errors and

127
00:08:07,860 --> 00:08:10,360
issues we may encounter when working with
Sass,

128
00:08:10,360 --> 00:08:12,430
then get our CSS optimized for production.