- Breaking the Style Sheet into Partials 7:35
- Finishing and Importing our Partials 6:17
- Placeholder Selectors 10:59
- Nesting Selectors 5:22
- Color Variables 8:34
- Font Stack and Asset Variables 6:44
- Reusing Code with Mixins 6:57
- Writing a Mixin for Common Text Patterns 6:45
- Defining Media Queries 8:13
- Refactoring with Sass Review 7 questions
Preview
Video Player
00:00
00:00
Defining Media Queries
8:13There are many benefits to using Sass when building or refactoring responsive layouts. In this video, we'll cover some the ways we can refactor our project's media queries.
There's lots of benefits to using Sass
when building or
0:00
refactoring responsive layout.
0:02
Mainly, because of how we are able to
define media queries.
0:04
For instance, we have the handy option of
nesting them,
0:07
inside rules, which keeps media queries
local to their component.
0:10
So let's go over some of the ways we can
refactor our project's media queries.
0:14
So one of the ways we can define media
queries with Sass,
0:19
is creating a layout partial for each
media query.
0:23
And defining them inside their respective
partial files.
0:27
Now one of the benefits of doing that is
that we're able to see the entire set of
0:30
media queries at once.
0:34
But I prefer to nest media queries inside
rule.
0:36
Because this keeps our media queries local
to the component and
0:39
the original styles we're modifying.
0:43
And what's great is that Sass will output
each nested media query
0:45
as a separate rule when the stylesheet is
compiled.
0:49
Since media queries tend to get duplicated
a lot in projects,
0:53
instead of hard coding the media query
breakpoints every time we write a media
0:57
query, it's usually best to create
variables or mixins for them.
1:01
So, for our project, we're going to define
a couple
1:05
of breakpoint variables to make things
more maintainable.
1:08
So, back in our styles.scss partial,
1:11
the only remaining rules we have in here
are our media queries.
1:15
So, we'll need to sort of distribute these
to their respective rules.
1:18
Now, currently, we're using two
breakpoints in our project.
1:23
One of these adjust the layout in the
narrow viewport sizes.
1:27
While the other adjusts parts of the
design in wider viewport sizes.
1:31
And as we can see, the breakpoints are at
a max width of 1024 pixels,
1:36
and a max width of 768 pixels.
1:41
So let's go back to our variables partial,
inside the base folder.
1:45
And declare variables for those
breakpoints.
1:50
So we'll scroll all the way down.
1:53
And right beneath the asset path variable,
1:55
let's add another comment that tells us
these are our media query breakpoint.
1:59
So we'll say media query breakpoints.
2:03
[SOUND] And now we're going to create our
two breakpoint variables.
2:07
So first, let's create the variable for
the more narrow breakpoint.
2:11
So let's call that break narrow, and right
below that,
2:16
let's create one for the wide breakpoint,
so
2:21
we'll call this one break dash wide.
2:26
[SOUND] So now as the values for these
variables,
2:30
we'll add their respective media query
expressions in between quotes.
2:33
So first, for break narrow, let's go ahead
and
2:38
add the expression max [SOUND] width
[SOUND] 768 pixels.
2:44
[SOUND] And right below that, for break
wide,
2:50
we'll write the expression max width
[SOUND] 1024 pixels.
2:54
[SOUND] Okay.
3:00
So now let's begin defining some of the
media query adjustments in our project.
3:03
So for instance, let's first go inside our
components directory.
3:08
And open up our icons partial.
3:13
And let's have a media query for our arrow
rule.
3:16
So if we go back to our style.scss
partial, we can see that the arrow
3:20
adjustments here are in the max width 768
media query.
3:26
So I'm actually going to cut the display:
none; declaration
3:31
out of this media query and I'll just
delete the rule there altogether.
3:38
And I'll go back inside the icons partial
and
3:42
define our media query inside this arrow
rule.
3:45
So let's say at media, and once again,
3:49
to pass the breakpoint variables, we'll
need to use interpolation syntax.
3:52
So I'll to hash, curly braces, then inside
we're going to pass the break
3:57
narrow variable for our narrow breakpoint.
4:03
[SOUND] So inside the media query rule,
4:06
I'm gonna paste in that display none
declaration.
4:09
Then I'll go ahead and save and preview
the project and let's see what happens.
4:13
Let's see if this worked.
4:18
So, I'm gonna start resizing the browser
and
4:19
sure enough, our icon image is displayed
to none in the narrow viewport sizes.
4:22
So great.
4:27
Our media query is working just fine.
4:28
So let's do some more.
4:30
Let's close out our icons.scss partial and
4:31
let's now go over to our typography
partial.
4:35
And let's define some media queries in
here.
4:39
So first, let's add one inside our main
heading rule.
4:41
So at the very bottom, we're going to say
at media hash, curly brackets.
4:45
[SOUND] And once again, our media query
breakpoint variable will be break narrow.
4:51
[SOUND] So let's go back to our style.scss
partial.
4:56
And we're going to cut out the
declarations in the main heading rule.
5:04
So now I'm just gonna delete that.
5:10
And back in our typography partial,
5:13
I'll just paste those inside the nested
media query.
5:15
[SOUND] All right, so let's save.
5:18
I'll refresh, and take a look real quick.
5:22
And it looks like, that looks good.
5:26
Our main heading adjusts accordingly.
5:29
[SOUND] And right below in our title rule,
let's add a media query here,
5:30
so at the bottom, we'll say, at media and
once again,
5:35
we're going to pass the break narrow
variable.
5:39
[BLANK_AUDIO]
5:43
And once again, we'll go back to our style
partial and
5:49
let's cut out the media query rules under
main title,
5:53
[SOUND] and paste them inside our new
media query.
5:57
[SOUND] I'll save,
6:01
refresh.
6:06
And, yep, that looks good.
6:09
And I'll go ahead and do one more before I
leave you on your own to do the rest.
6:12
So let's go ahead and do the one for our
intro paragraph.
6:16
So, right below the include declaration,
we'll say,
6:20
at media, and we'll once again pass that
break narrow variable.
6:24
[SOUND] So, back in our style.scss
partial,
6:29
let's copy the font size here for intro.
6:37
Paste it inside our new media query rule.
6:44
Then I'll go ahead and
6:49
take a look in the browser just to see if
it's working and yep, it's looking good.
6:50
And now we're all set with our typography
media queries.
6:56
Now I'm not gonna write all the media
queries in our project here,
7:00
because that will take up a lot of time.
7:02
So, go ahead and add the rest of them on
your own, and then you can go ahead and
7:04
delete the style.scss partial when you're
all done.
7:09
Finally, there's kind of a misconception
that
7:15
nested media queries are a maintainability
nightmare.
7:17
And they can cause bloat in the output.
7:21
Well that just depends on the scale of
your project, but
7:24
even then, the extra media query rules and
7:27
the output do not bloat the file size in
any significant way.
7:30
And as with most things in web
development,
7:34
there's really no silver bullet method
here.
7:37
So finds what's best for the conditions of
your project and stick with that.
7:40
We can also build powerful conditional
media query nixins using Sass's if and
7:44
else directives.
7:49
So in the teacher's notes, I've posted a
link to the section in our Modular CSS
7:50
with Sass course where you can learn how
to build them.
7:55
So that's it.
7:59
Our CSS refactoring is complete.
8:00
That wasn't so bad after all, was it?
8:01
Coming up next, we'll take a look at how
to get around some of the errors and
8:04
issues we may encounter when working with
Sass,
8:07
then get our CSS optimized for production.
8:10